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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
javascript实现画板功能
Apr 12 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
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Smarty保留变量用法分析
2016/05/23 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python中存取文件的4种不同操作
2018/07/02 Python
django 外键创建注意事项说明
2020/05/20 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
会计助理岗位职责
2014/02/17 职场文书
竞聘上岗演讲
2014/05/19 职场文书
高三复习计划
2015/01/19 职场文书
行政处罚告知书
2015/07/01 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python