如何设置DIV可编辑

如何让一个div变成可编辑状态，比如富文本的输入框就可以用可编辑的div（自定义一个富文本时可用），类似textare。

有2种方案可以实现：1是通过contenteditable属性设置为true，2是利用css的user-modify属性。

方案一：contenteditable属性

<div  id="add-content" contenteditable="true">这里可以编辑</div>

contenteditable 属性是 html5 中的新属性，contenteditable 属性规定元素内容是否可编辑。

注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

js操作：

监听事件keydown 、textInput 、input

<script>var content = document.getElementById('add-content')//注册中文的输入事件，var isCN = false;content.addEventListener('compositionstart',function(){    isCN = true;});content.addEventListener('compositionend',function(){    isCN = false;})//注册文本输入事件，获取光标的起止偏移数据,如果是非中文以及超出长度的输入，则撤销本次操作var txtAnchorOffset, txtFocusOffset;content.addEventListener("textInput",function(event){    var _sel = document.getSelection();    txtAnchorOffset = _sel.anchorOffset;    txtFocusOffset = _sel.focusOffset;    //必须加上isCN的判断，否则获取不到正确的光标数据    if(!isCN && this.textContent.length >= noteMax){        event.preventDefault();    }});//注册粘贴事件，获取粘贴数据的长度var pastedLength;  content.addEventListener("paste",function(event){    if(!event.clipboardData) return;    pastedLength = event.clipboardData.getData('Text').length;});
//注册输入事件，对输入的数据进行content.addEventListener("input",function(event){    setTimeout(function(){        if(!isCN){            var _this = content;            if(_this.textContent.length > noteMax){                var data = _this.textContent;                if(pastedLength > 1){                    oldDate = data.slice(0, txtAnchorOffset) + data.slice(txtFocusOffset+pastedLength, data.length);                    //粘贴字符串长度置为0，以免影响到下一次判断。                    pastedLength = 0;                } else {                    oldDate = data.slice(0, txtAnchorOffset) + data.slice(txtFocusOffset, data.length);                }                //再次截取最大长度字符串，防止溢出                _this.textContent = oldDate.slice(0, noteMax);                //光标移动到起始偏移位置                document.getSelection().collapse(_this.firstChild, txtAnchorOffset);47             }        }    }, 0);   //content.focus(); });</script>

方案二：css中user-modify属性

<div id="add-content" >这里可以编辑</div><style>#add-content{  user-modify: read-write;  -webkit-user-modify: read-write;}</style>

user-modify属性，用来控制用户能否对页面文本进行编辑。与标签的contentEditable属性类似。语法如下：

user-modify: read-only | read-write | read-write-plaintext-only

参数说明：

read-only	内容只读。
read-write	内容可读写。(支持富文本)
read-write-plaintext-only	内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。

学习更多技能

请点击下方公众号