记得几年前就碰到过这种需求，现在又碰到了，解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素有自带的这个属性，但是这种模拟的有很多不确定的元素，比如说用户复制粘贴进去，会直接粘贴进去html，不是纯文本，怎么解决呢？？有三种办法，下面我们来看一下
注: 如果在IOS上用contenteditable 模拟输入框，点击时可以弹出键盘但是无法输入，加一个样式-webkit-user-select:text 就可以了
- 第一种方法是用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;
}
- 第二种方法控制的是用
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了
- 用粘贴事件，将粘贴板的内容过滤成文本，然后再插入内容
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);
}
};
网友评论