模拟input输入框高度自适应

记得几年前就碰到过这种需求，现在又碰到了，解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素有自带的这个属性，但是这种模拟的有很多不确定的元素，比如说用户复制粘贴进去，会直接粘贴进去html，不是纯文本，怎么解决呢？？有三种办法，下面我们来看一下

注: 如果在IOS上用contenteditable 模拟输入框，点击时可以弹出键盘但是无法输入，加一个样式-webkit-user-select:text 就可以了

1. 第一种方法是用css来控制，但是只兼容移动端或者webkit内核的浏览器

html

<div class="div read-write-plaintext-only"></div>

css

.div{
  width:500px;
  min-height:100px;
  border:1px solid #ccc;
}
.read-only{
  /* 就是普通的元素，不能输入 */
  -webkit-user-modify: read-only;
}
.read-write{
  /* 可以输入富文本，也可以输入纯文本 */
  -webkit-user-modify: read-write;
}
.write-only{
  /* 可以忽略，没有啥浏览器支持 */
  user-modify: write-only;
}
.read-write-plaintext-only{
  /* 只可以输入纯文本 */
  -webkit-user-modify: read-write-plaintext-only;
}

2. 第二种方法控制的是用contenteditable属性，但是只兼容移动端或者webkit内核的浏览器

首先我们看一下contenteditable属性都有什么，events和caret具体什么意思，我不太明白，这不重要的，重要的是plaintext-only属性值可以输入纯文本，true的话，可以输入富文本和纯文本，false代表不能输入，就是一个普通的元素

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

html

<!--只能输入纯文本-->
<div contenteditable="plaintext-only" class="div"></div>

<!--可以输入富文本和纯文本-->
<div contenteditable="true" class="div"></div>

css

.div{
  width:500px;
  min-height:100px;
  border:1px solid #ccc;
}

其实在国内，大部分主流的浏览器都是webkit内核的，上面的两种方法都可以用，但是如果想兼容的话，只能上js了

3. 用粘贴事件，将粘贴板的内容过滤成文本，然后再插入内容

html

<div contenteditable="true" class="div"></div>

js

let oDiv=document.querySelector(".div");
oDiv.onpaste=function (e){
  e.preventDefault();
  var text = null;
  
  if(window.clipboardData && clipboardData.setData) {
    // IE
    text = window.clipboardData.getData('text');
  } else {
    text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
  }
  if (document.body.createTextRange) {    
    if (document.selection) {
      textRange = document.selection.createRange();
    } else if (window.getSelection) {
      sel = window.getSelection();
      var range = sel.getRangeAt(0);
      
      // 创建临时元素，使得TextRange可以移动到正确的位置
      var tempEl = document.createElement("span");
      tempEl.innerHTML = "&#FEFF;";
      range.deleteContents();
      range.insertNode(tempEl);
      textRange = document.body.createTextRange();
      textRange.moveToElementText(tempEl);
      tempEl.parentNode.removeChild(tempEl);
    }
    textRange.text = text;
    textRange.collapse(false);
    textRange.select();
  } else {
      // Chrome之类浏览器
      document.execCommand("insertText", false, text);
  }
};

注: 本文章是参考大佬张鑫旭的文章-小tip: 如何让contenteditable元素只能输入纯文本