阅读全文，你将获得以下解决方案。点击长文本编辑textarea，会自动以输入值获取焦点，高度可复制添加，可粘贴文字，可粘贴文字，可粘贴图片跳转到最前面，为什么？查阅文档MDN，textarea元素有selectionEnd和selectionStart属性表示选中文本的开始和结束位置，DOM接口实例为HTMLTextAreaElement，它有一个setSelectionRange方法，用于选择输入框中的文本Text，用法:TextAreaElement.setSelectionRange(selectionStart,selectionEnd,[optional]selectionDirection);那么我们只需要做selectionStart===selectionEnd===value.length，这样光标就会被选中到最后。edit.addEventListener("click",function(){txt.classList.add("hidden");document.body.insertBefore(textarea,edit);textarea.innerHTML="这是需要编辑的信息";textarea.focus();//textarea.selectionEnd=textarea.innerHTML.length;textarea.setSelectionRange(textarea.innerHTML.length,textarea.innerHTML.length);});2.自适应高度当不设置高度时，换行时会出现滚动条，所以只要textarea滚动条消失，让它的height=scrollHieght，那么如何监听textarea的变化，就需要输入事件，让textarea高度动态等于它的scrollHeight，代码如下：textarea.addEventListener("input",function(){this.style.height=`${this.scrollHeight}px`;});为什么每次输入都会增加高度（每次4px），经过测试Safari也有同样的效果，Firefox符合预期的高度。异常增加，查看chrome控制台（checkchromium），发现textarea内置了很多样式，尝试去除padding后，随着内容正常增加，可以高度自适应。为什么输入padding值后高度没有增加？（没有找到合理的解释，欢迎留言讨论和解答。）但是删除文字时高度不会自动缩放。原因分析了。当文本被删除和换行时，scrollHeight的大小不会改变。ScrollHeight是只读属性（MDN-文档），如何重新计算scrollHeight高度？只改变高度，所以：textarea.addEventListener("input",function(e){this.style.height="inherit";this.style.height=`${this.scrollHeight}px`;});到这里高度自适应的输入内容就完成了，但是每一个换行符的闪烁都让人不舒服，过渡带了一波，textarea{overflow:hidden;//防止换行时滚动条闪烁padding:5px10px;框大小：边框框；transition:all0.2slinear;}结果transition没有效果。原因是高度的初始值或参考值必须是数值过渡动画才能生效。如果高度设置为自动或继承，动画将不会生效，所以折衷的方法是删除它。再次重置高度的时候，输入的时候就不用再重置了，这样输入的时候动画就生效了，删除的时候就没有动画了。暂时没有想到更好的办法。textarea.addEventListener("keyup",function(e){if(e.keyCode===8){this.style.height="inherit";this.style.height=`${this.scrollHeight}px`;}else{this.style.height=`${this.scrollHeight}px`;}});3.支持粘贴文字、图片等，textarea只能输入文字，不能粘贴图片。textarea.addEventListener("paste",function(e){e.preventDefault();console.log("paste",e.clipboardData.items,e.clipboardData.types,e.clipboardData.getData("text/html"),e.clipboardData.getData("text/plain"),e.clipboardData.getData("text/Files"));},false);选项2divcontenteditable替换textarea1。自动获取焦点Editdivcontenteditable为true，然后使用Range和Selection移动光标到最终效果。edit.addEventListener("click",()=>{textarea.setAttribute("contenteditable",true);textarea.focus();constrange=document.createRange();//范围包含内容range.selectNodeContents(textarea);//range.setStart(textarea.firstChild,0);//range.setStart(textarea.lastChild,textarea.innerHTML.length);//起始位置是否相同range.collapse(false);constsel=window.getSelection();//从选择中移除所有范围。sel.removeAllRanges();//Range对象将被添加到选择中。sel.addRange(range);});2.Adaptheightdivcontenteditable自然支持根据输入自适应高度。3.粘贴图片、文字等textarea.addEventListener("paste",function(e){e.preventDefault();constclipboardData=e.clipboardData||e.originalEvent.clipboardData;//获取纯文本lettext=clipboardData.getData("text/plain");letfile=clipboardData.getData("text/plain");//console.log(clipboardData.items,clipboardData.getData("text/Files"));//插入img,可以做一些上传图片的操作insertImg(clipboardData);//只输入纯文本document.execCommand("insertText",false,text);});该方法可以限制只上传文字或图片。欢迎留言讨论其他textarea高适配方案。
