JS在可编辑的div中的光标位置插入内容的方法


Posted in Javascript onNovember 20, 2014

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:

首先要让DIV启用编辑模式

<div contenteditable=true id="divTest"></div>

通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。
不扯话题了。下面说怎么获取或设置光标位置.

2个步骤:

① 获取DIV中的光标位置
② 改变光标位置

var cursor = 0; // 光标位置  

document.onselectionchange = function () {

var range = document.selection.createRange();

var srcele = range.parentElement();//获取到当前元素

var copy = document.body.createTextRange();

copy.moveToElementText(srcele);

for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {

 copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量.

}

}

给document绑定光标变化事件。用来记录光标位置.
这样就可以拿到DIV的光标位置了.
function moveEnd(obj) {

lyTXT1.focus();

var r = document.selection.createRange();

//因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了

r.moveStart('character', lyTXT1.innerText.length - cursor);

r.collapse(true);

r.select();

}

通过上面的我们就可以将DIV中的光标移动到最后面了
一个完整的实例
<button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button>

<div contentEditable="true" style="height:50px; border:2px solid red;" id="test"> </div>

 

function insertHtmlAtCaret(html) {

var sel, range;

if (window.getSelection) {

// IE9 and non-IE

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

// Range.createContextualFragment() would be useful here but is

// non-standard and not supported in all browsers (IE9, for one)

var el = document.createElement("div");

el.innerHTML = html;

var frag = document.createDocumentFragment(), node, lastNode;

while ( (node = el.firstChild) ) {

lastNode = frag.appendChild(node);

}

range.insertNode(frag);

// Preserve the selection

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

// IE < 9

document.selection.createRange().pasteHTML(html);

}

}

再看一个基于jquery的实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>contenteditable</title>

<style>

*{

 margin:0;padding:0;

}

.im-message-area{

 width:98%;

 padding:2px;

 height:75px;

 border:#000 solid 1px;

 background:#fff;

 font:12px/20px arial,"5b8b4f53";

 word-wrap:break-word;

 overflow-y:auto;

 line-height:1;

}

.ul{display:none;}

.ul li{

 background-color:#CCC;

 width:50px;

}

</style>

<script language="javascript" type="text/javascript">

function inimage(text){

 var obj= $(".im-message-area")[0];

 var range, node;

 if(!obj.hasfocus) {

  obj.focus();

 }

    if (window.getSelection && window.getSelection().getRangeAt) {

        range = window.getSelection().getRangeAt(0);

  range.collapse(false);

        node = range.createContextualFragment(text);

  var c = node.lastChild;

        range.insertNode(node);

  if(c){

   range.setEndAfter(c);

   range.setStartAfter(c)

  }

  var j = window.getSelection();

  j.removeAllRanges();

  j.addRange(range);

  

    } else if (document.selection && document.selection.createRange) {

        document.selection.createRange().pasteHTML(text);

    }

}

$(document).ready(function(){

 $('#button').click(function(){

  $('.ul').show();

 })

 $('.ul li').each(function(){

  $(this).click(function(){

   inimage($(this).text());

  }) 

 })

});

</script>

</head>

<body>

 <div contenteditable="true" id="im_message_area" class="im-message-area"><br></div>

 <a href="javascript:void(0)" id="button">按钮</a>

 <ul class="ul">

  <li>(笑)</li>

  <li>(哭)</li>

  <li>(乐)</li>

 </ul>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
详解JavaScript树结构
Jan 09 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
js实现div弹出层的方法
Nov 20 #Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 #Javascript
js实现二代身份证号码验证详解
Nov 20 #Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 #Javascript
javascript获取flash版本号的方法
Nov 20 #Javascript
Jquery对象和Dom对象的区别分析
Nov 20 #Javascript
深入理解javascript变量声明
Nov 20 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
社区工作感言
2014/02/21 职场文书
信息技术课后反思
2014/04/27 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
爱护公共设施的标语
2014/06/24 职场文书
教室布置标语
2014/06/26 职场文书
党员自我剖析材料
2014/08/31 职场文书
文明单位创建材料
2014/12/24 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
公司新员工欢迎词
2015/09/30 职场文书
学校教师培训工作总结
2015/10/14 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python