如何设置DIV可编辑

╰+哭是因爲堅強的太久メ 2022-09-02 04:02 450阅读 0赞

![e3e81d163c6837031c7da3a9ac2e1c3f.png][]

如何让一个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

参数说明：

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

#  #

**学习更多技能**

**请点击下方公众号**

![137f403b1f67efd3e3b30c2b32cea2d8.gif][]

![0bd3b8f86379e50e042f43af17f08307.png][]

![903be14fad58b499ed855ee3c64a2ccd.png][]

[e3e81d163c6837031c7da3a9ac2e1c3f.png]: /images/20220829/33baf2c5c3f94dbb92751daca0249c41.png
[137f403b1f67efd3e3b30c2b32cea2d8.gif]: /images/20220829/30baa3b412454bbf9af559d84999bf6a.png
[0bd3b8f86379e50e042f43af17f08307.png]: /images/20220829/6ba10b0400634af8bb874d69f7b86820.png
[903be14fad58b499ed855ee3c64a2ccd.png]: /images/20220829/3bdc6a5c899e4cc38d5e831bbca05baf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关关键字提示编辑器一之可编辑div获取光标位置

没有考虑浏览器兼容性，暂时只考虑了Chrome。效果 ![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

﹏ヽ暗。殇╰゛Y/ 2022年12月23日 06:18/ 0 赞/ 169 阅读

相关 html div 可编辑,使div可编辑 contentEditable

属性 contentEditable 这是一个可编辑div 比如富文本的输入框就可以用可编辑的div(自定义一个富文本时可用) 或者另一个场景，有时候需要一个可输入框双击

╰+哭是因爲堅強的太久メ/ 2022年10月11日 00:43/ 0 赞/ 197 阅读

相关如何设置DIV可编辑

![e3e81d163c6837031c7da3a9ac2e1c3f.png][] 如何让一个div变成可编辑状态，比如富文本的输入框就可以用可编辑的div（自定义一个富文本

╰+哭是因爲堅強的太久メ/ 2022年09月02日 04:02/ 0 赞/ 451 阅读

相关 easyUI中PropertyGrid 设置不可编辑

> 以前我看到easyUI中这样一句话 type: string, the edit type, possible type is: text,textarea,checkb

不念不忘少年蓝@/ 2022年08月10日 16:56/ 0 赞/ 229 阅读

相关可编辑div的使用，实现类似textarea功能

简介最近在做项目中遇到一个有意思的功能：在一个文本域中不仅可以输入正常的汉字和英文，还可以在光标处插入一些自定义的内容，如：“《java编程思想》”，那么这本书的书名和

落日映苍穹つ/ 2022年06月12日 03:36/ 0 赞/ 278 阅读

相关 div可编辑user-modify/contenteditable

div通常是用于只读的，但有时候我们需要对div的内容进行编辑，很多人推荐使用user-modify这个属性，在google里用-webkit-read-modify，在fi

以你之姓@/ 2022年06月01日 06:47/ 0 赞/ 216 阅读

相关 Android EditText设置可编辑、不可编辑态及点击事件

一、设置不可编辑且有点击事件二、设置不可编辑且无点击事件三、设置可编辑四、源代码

梦里梦外;/ 2022年05月18日 10:16/ 0 赞/ 570 阅读

相关如何设置select，input只读不可编辑且值可传递

今天实现一个需求的时候遇到这个问题，总结如下：一、使input文本框不可编辑，我知道的有三种方法 1. disabled 属性规定应该禁用 input 元素，被禁用的 i

谁践踏了优雅/ 2022年03月18日 05:48/ 0 赞/ 838 阅读

相关 html js设置div可拖动效果

第一种：先看代码，可直接复制使用。这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。问题：js设置div可拖动效果当我在实际项目中使用时，div里有关闭d

灰太狼/ 2022年03月17日 12:52/ 0 赞/ 633 阅读

相关如何让div获取焦点或可编辑

DIV获取焦点（两种方法）：需添加tabindex="0"或者contenteditable="true"属性 ①：设置div为可编辑状态，则可点击获取焦点，同时di

快来打我*/ 2021年11月29日 23:00/ 0 赞/ 493 阅读