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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
js数组的操作详解
Mar 27 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
在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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
再论Javascript的类继承
2011/03/05 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
NodeJS安装图文教程
2018/04/19 NodeJs
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python实现点对点聊天程序
2018/07/28 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
中科创达面试题
2016/12/28 面试题
数学系毕业生求职信
2014/05/29 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
工作检讨书范文
2015/01/23 职场文书
大学学生个人总结
2015/02/15 职场文书
部队个人年终总结
2015/03/02 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫