<div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

标签：状态   innertext   操作   pre   通过   使用   safari   att   错误   

需求：web页面需要一个文本输入框。1、该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息，2、文本框输入状态下其高度会随文本内容自动撑开。

方案选择：1、使用<textarea>标签。但是标签高度不会随文本高度自动撑开，而是出现滚动条。使用JS动态计算文本内容高度赋予<textarea>标签高度。

　　　　　2、使用<div>或者<p>、<span>等非表单标签，通过赋予其contentEditable=‘true‘属性，是其获得内容可以编辑的功能，从而使标签高度随着文本内容高度自动撑开。

遇到的问题：方案一遇到的问题此文不做讨论。

使用contentEditable属性虽然满足的需求2，但是无法满足需求1。

1 <div contentEditable=‘true‘></div>

解决方案：使用:before伪元素达到仿‘placeholder’的效果。

使用css3的attr()函数。获取div标签中的‘placeholder’或者其他自定义属性‘data-*‘的值，赋予:before伪元素展示即可。

当文本输入的时候，使用JS替换div标签的classname，使其没有:before伪元素，当输入框没有值得时候再替换classname，重新赋予:before伪元素，即可达到input等表单标签的placeholder效果。

<div class=‘d‘ contentEditable=‘true‘ placeholder=‘请输入您的建议‘></div> 
.d:before {
         //有:before
         content: attr(placeholder);
         display: block;
         color: #adadad;
}
 
<div class=‘a‘ contentEditable=‘true‘ placeholder=‘请输入您的建议‘></div>
.a{
      // 无:before  
}

遇到的问题：仿‘placeholder’在safari的表现不同。当用输入框内输入值后，在删除输入框，safari无法用DOM.innerText或者DOM.innerHTML的length来做判断，因为删除完后，在输入框中有一个空换行符。具体原理本人不是很懂。

解决方案：在length的判断基础上再额外加判断条件

var val=DOM.innerHTML;

val.length > 0 && val != ‘<br>‘ && val != ‘<br/>‘;


var val2=DOM.innerText;

val2.length > 0 && val2 != ‘<br>‘ && val2 != ‘<br/>‘

如果你不需要用到上面的方法可以使用DOM.textContent。safari和chrome表现相同，具体场景使用具体的API来操作。

至于三者的区别，笔直理解不透彻，就不描述了。

以上是纯属个人开发中遇到的问题和理解，如有错误，请谅解。

<div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

标签：状态   innertext   操作   pre   通过   使用   safari   att   错误   

原文地址：https://www.cnblogs.com/z-y-zone/p/10184579.html