JavaScript记录光标在编辑器中位置的实现方法


Posted in Javascript onApril 22, 2016

本文实例讲述了JavaScript记录光标在编辑器中位置的实现方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function $(ele){return document.getElementById(ele)}
//记录编辑器中的位置
   var selection_start;
   var selection_end;
   function savePos(textBox){
   var start=0;
   var end=0;
   if(typeof(textBox.selectionStart) == "number"){ // not ie
    //alert(typeof(textBox.selectionStart) );
    start = textBox.selectionStart;
    end = textBox.selectionEnd;
   }
   else if(document.selection){
    var range = document.selection.createRange();
    if(range.parentElement().id == textBox.id){
     var range_all = document.body.createTextRange();
     range_all.moveToElementText(textBox);
     for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
      range_all.moveStart('character', 1);
     for (var i = 0; i <= start; i ++){
      if (textBox.value.charAt(i) == '/n')
       start++;
     }
      var range_all = document.body.createTextRange();
      range_all.moveToElementText(textBox);
      for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
       range_all.moveStart('character', 1);
       for (var i = 0; i <= end; i ++){
        if (textBox.value.charAt(i) == '/n')
         end ++;
       }
     }
    }
    selection_start = start;
    selection_end = end;
   }
</script>
<form action="" id="test">
<textarea id="t" onfocus="savePos(this);$('log').value=selection_start" onkeydown="savePos(this);$('log').value=selection_start" onmousedown="savePos(this);$('log').value=selection_start" onmouseup="savePos(this);$('log').value=selection_start" >
</textarea>
<input type="text" id="log" />
</form>
</body>
</html>

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 #Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 #Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 #Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
动态加载js文件简单示例
Apr 21 #Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 #Javascript
You might like
服务器web工具 php环境下
2010/12/29 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Python+Django搭建自己的blog网站
2018/03/13 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
企业厂长岗位职责
2013/12/17 职场文书
晨会主持词
2014/03/17 职场文书
产品销售计划书
2014/05/04 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
亲戚关系证明
2015/06/24 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
详解java如何集成swagger组件
2021/06/21 Java/Android