contentEditable 中光标控制

最新推荐文章于 2025-04-08 11:12:29 发布

原创最新推荐文章于 2025-04-08 11:12:29 发布

· 5.1k 阅读

6 ·

版权

文章标签：

#html #javascript #html5

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了HTML5的contenteditable属性，通过此属性可以将任何元素转化为可编辑区域。内容包括如何设置光标颜色，以及在光标处移动和插入内容的方法，特别提到了`el.focus()`在定位操作元素中的重要性，并指出IE浏览器对于某些方法的支持限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

简易 div 输入框

HTML5规范引入了 contenteditable 属性，它几乎可以用在任何元素上，只要添加这一属性即可变为可编译区域。查看详情

一个简单的 <div> 输入框：

  <style>
  .editdiv{ 
    min-height: 50px;
    background: #eee;
    /* 
    清除编辑器获取焦点时的默认样式：
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
    outline:none;
    */
    /* 设置光标颜色：*/
    caret-color: green;
    /* 防止全局设置 -webkit-user-select: none 后不会获取焦点 */
    -webkit-user-select:text;
  }
  /* 设置提示文字 */
  .editdiv:empty::before {
    content: attr(placeholder);
    color: #999;
  }
  .editdiv:focus::before {
    content: none;
  }  
  </style>

  <div contenteditable="true" class="editdiv" placeholder="请输入......"></div>
  <!-- true  指定元素是可编辑的 -->
  <!-- false 指定元素是不可编辑的 -->

  <script>
  //兼容处理，统一换行时的元素渲染
  document.execCommand("defaultParagraphSeparator", false, "div");    
  </script>

设置光标的颜色
使用 CSS3 新增 caret-color 属性来定义插入光标的颜色。.

input{
  caret-color:red;  
}

浏览器支持：
在这里插入图片描述

1.移动光标到开始或结尾

/*
* type: 'start'移动到开头，'end'移到到结尾
*/
function moveEnd(el,type) {
  el.focus(); 
  if (window.getSelection) {               //ie11 10 9 ff safari
    var range = window.getSelection();     //创建range
    range.selectAllChildren(el);           //选择el子项
    if(type=='start'){
      range.collapseToStart();             //光标移至开头
    }else{
      range.collapseToEnd();               //光标移至最后
    }
  }
  else if (document.selection) {                  //ie10 9 8 7 6 5
    var range = document.selection.createRange(); //创建选择对象
    range.moveToElementText(el);                  //range定位到ele
    if(type=='start'){
      range.collapse();                           //光标移至开头
    }else{
      range.collapse(false);                      //光标移至最后
    }
    range.select();
  }
}

2.在光标处插入内容

/*
* el   编辑框元素
* html 要插入的内容，可以是 html 代码
*/
function insertCont(el,html){
  el.focus();
  if(document.selection){   //IE 10,9,8,7                             
    document.selection.createRange().pasteHTML(html);
  }else if(window.getSelection){
    var sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      var range = sel.getRangeAt(0);
      range.deleteContents();
      var div = document.createElement("div");
      div.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ( (node = div.firstChild) ) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  }
}

上面代码中 el.focus() 比较关键，用来确定操作目标元素，不然的话，鼠标点击页面任何地方都可插入内容。因为这里使用的是整个页面选区操作。其实有2中更简便的方法：
document.execCommand('insertHTML',false, '<span>html</span>');
document.execCommand('insertText',false,'文本')
缺点是IE浏览器只支持 'insertText' 而不支持 'insertHTML'。