contentEditable 中光标控制

简易 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="请输入......">