contentEditable 中光标控制

文章目录

简易 div 输入框
1.移动光标到开始或结尾
2.在光标处插入内容

简易 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 safarivar range = window.getSelection();     //创建rangerange.selectAllChildren(el);           //选择el子项if(type=='start'){range.collapseToStart();             //光标移至开头}else{range.collapseToEnd();               //光标移至最后}}else if (document.selection) {                  //ie10 9 8 7 6 5var range = document.selection.createRange(); //创建选择对象range.moveToElementText(el);                  //range定位到eleif(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'。

contentEditable 中光标控制相关推荐

contenteditable元素的光标控制，自制emoji插件
最近有个自定义表情插件要放入移动端页面,折腾了几天,有了些成果,分享下. 关键两点点就是contenteditable元素光标设置,和保持该元素的输入状态. 先上几个API吧 getSelection ...
获取html中光标位置
本篇整理在项目中遇到的一个小问题,在js中监听了"parse"粘贴事件,导致粘贴文字到输入框出现问题. 通过获取输入框光标位置,然后拼接字符串解决. 第一种方法获取textare ...
混合特征目标选择用于基于BCI的二维光标控制
原文:Long J, Li Y, Yu T, et al. Target selection with hybrid feature for BCI-based 2-D cursor controlJ ...
SAP SD基础知识之交货中的控制元素
SAP SD基础知识之交货中的控制元素一,交货类型Delivery Type Delivery type控制整个的交货,我们可以在delivery header中看到delivery type: D ...
chmod 是一条在Unix系统中用于控制用户对文件的权限的命令
chmod 是一条在Unix系统中用于控制用户对文件的权限的命令(change mode单词前缀的组合)和函数.只有文件所有者和超级用户可以修改文件或目录的权限.可以使用绝对模式,符号模式指定文件的权 ...
spring中事务控制的一组API
Spring事务控制我们要明确的第一:JavaEE体系进行分层开发,事务处理位于业务层,Spring提供了分层设计业务层的事务处理解决方案. 第二:spring框架为我们提供了一组事务控制的接口.具 ...
hadoop中如何控制map的数量
hadoop中如何控制map的数量 @(HADOOP)[hadoop] hadooop提供了一个设置map个数的参数mapred.map.tasks,我们可以通过这个参数来控制map的个数.但是通过这 ...
mysql游标书写_mysql中光标如何书写
mysql中光标书写的方法:首先声明光标:然后开启光标,代码为[OPEN cursor_name]:接着捕获光标:最后关闭光标,代码为[CLOSE cursor_name]. 本教程操作环境:wind ...
JAVA语言中流程控制（顺序结构、判断语句、循环语句）
流程控制: 程序在执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的,所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过控制语句的执行顺序来实现想要的功能.java中流程控制有:顺 ...

contentEditable 中光标控制

文章目录

简易 div 输入框

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

2.在光标处插入内容

contentEditable 中光标控制相关推荐

最新文章

热门文章