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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
canvas实现贪食蛇的实践
Feb 15 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue观察模式浅析
2018/09/25 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python协程的用法和例子详解
2017/09/09 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
环保标语口号
2014/06/13 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
罗马假日观后感
2015/06/08 职场文书
企业安全生产规章制度
2015/08/06 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python