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 相关文章推荐
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
js基础语法与maven项目配置教程案例
Jul 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用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php设计模式之委托模式
2016/02/13 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP函数积累总结
2019/03/19 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python入门教程之if语句的用法
2015/05/14 Python
python之pandas用法大全
2018/03/13 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
考生诚信考试承诺书
2014/05/23 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
劳模事迹材料范文
2014/12/24 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers