textarea自适应宽度,textarea自动高度
阅读全文，你会得到以下解决方法。
点击长文本编辑文本区自动获得焦点。它会随着输入值自动膨胀和收缩。可以高度复制。添加信息、粘贴文本和粘贴图片。下面的代码执行环境示例是Chrome80。
方案一
Htmltextarea元素
1. 自动获得焦点
点击编辑自动获得焦点，光标跳到前面。为什么？
检查文档的MDN。textarea元素具有selectionEnd和selectionStart属性，用于指示选定文本的开始和结束位置。DOM接口示例是HTMLTextAreaElement，它具有setSelectionRange方法来选择输入框中的文本。用法：textareaelement。setSelectionRange(selection start，SelectionEnd，[可选]selection direction)；
然后我们只要做selection start==selection end==value . length，这样光标就选到底了。
edit.addEventListener(click ，function(){ txt . class list . add( hidden )；document . body . insert before(textarea，edit)；Textarea.innerHTML=这是需要编辑的信息；textarea . focus()；//textarea . selection end=textarea . innerhtml . length；textarea . setselectionrange(textarea . innerhtml . length，textarea . innerhtml . length)；});2. 自适应高度
没有设置高度时，换行时会出现滚动条，所以只要textarea滚动条消失，其height=scrollHieght，那么如何监控textarea的变化就需要输入事件使textarea的高度动态等于其scrollHeight。代码如下：
textarea . addevent listener( input ，function(){ this . style . height=` $ { this . scroll height } px `；});
为什么每次输入都会增加高度(每次4px)？经过测试，Safari也有同样的效果。火狐符合预期高度，没有异常增加。查看Chrome控制台，发现textarea内置了很多样式。在尝试移除填充后，它可以随着内容的正常增加而高度自适应。
style textarea { padding:0；}/style textarea/textareascriptconst textarea=document . createelement( textarea )；textarea . addevent listener( input ，function(e){ this . style . height=` $ { this . scroll height } px `；});/script为什么删除填充值后输入后高度不增加？(未找到合理解释，请留言讨论答案)
但是，当文本被删除时，高度不能自动缩放。分析了原因。当文本被删除并且换行时，scrollHeight的大小不会改变。作为只读属性(MDN- document)，如何重新计算scrollHeight？只改变高度，所以：
textarea . addevent listener( input ，function(e){ this . style . height= inherit )；this . style . height=` $ { this . scroll height } px `；});直到完成这个适应性很强的输入内容，但是每次断线，闪烁都很难受，转场带一波。
textarea { overflow:hidden；//换行时防止滚动条闪烁。填充：5px 10px框大小：边框-框；过渡：全0.2s线性；}结果transition没有起作用，因为高度的初始值或参考值必须是数值，才会使过渡动画生效，高度设置为auto或inherit的动画不会生效，所以折中的办法是删除时重置高度，输入时不需要重置，这样动画输入时生效，删除时没有动画。我暂时没有想到更好的办法。
textarea . addevent listener( keyup ，function(e){ if(e . key code===8){ this . style . height= inherit ；this . style . height=` $ { this . scroll height } px `；} else { this . style . height=` $ { this . scroll height } px `；}});3. 支持粘贴文本，图片等
Textarea只能输入文本，不能粘贴图片。
textarea . addevent listener( paste ，function(e){ e . prevent default()；console.log( paste ，e.clipboardData.items，e.clipboardData.types，e . clipboard data . get data( text/html )，e . clipboard data . get data( text/plain )，e . clipboard data . get data( text/Files ))；}，假)；方案二
Diveditable替换textarea。
1. 自动获得焦点
将div内容编辑为true，然后使用范围和选择光标移动到最终效果。
edit.addEventListener(click ，()={ textarea。设置属性(“内容可编辑”，true)；文本区域。焦点()；常量范围=文档。创建范围().//范围包含的内容范围。selectnodecontents(textarea)；//范围。设置开始(文本区域。第一胎，0)；//范围。设置开始(文本区域。最后一个孩子，文本区。innerhtml。长度)；//起始位置是否相同范围。崩溃(假)；const sel=窗口。get selection()；//将所有的区域都从选区中移除sel。removeallranges()；//一个区域（范围)对象将被加入选区sel.addRange(范围);});2. 自适应高度
差异内容可编辑天然支持根据输入来自适应高度。
3. 粘贴图片， 文本等
文本区域。addevent listener( paste ，function(e){ e . prevent default()；常数剪贴板数据=e .剪贴板数据 e .原始事件。剪贴板数据；//获取纯文本让文本=剪贴板数据。获取数据(“text/plain”)；让文件=剪贴板数据。获取数据(“text/plain”)；//控制台。日志(剪贴板数据。项目，剪贴板数据。获取数据(文本/文件)；//插入img，可以做一些上传图片的一些操作插入(剪贴板数据);//只输入纯文本文档。exec命令(插入文本，false，text)；});此方法可以限定只能上传文本或者图片。
欢迎留言讨论其他文本区域高度自适应的方案。
到此这篇关于HTML5文本区域高度自适应的两种方案的文章就介绍到这了，更多相关文本区域高度自适应内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。