脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript记录光标在编辑器中位置

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

 更新时间：2016年04月22日 08:52:09   作者：zhangw428  
这篇文章主要介绍了JavaScript记录光标在编辑器中位置的实现方法,涉及JavaScript鼠标事件结合页面元素的操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS实现京东放大镜效果

    JS实现京东放大镜效果

    这篇文章主要为大家详细介绍了JS实现京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS实现跟随鼠标闪烁转动色块的方法

    JS实现跟随鼠标闪烁转动色块的方法

    这篇文章主要介绍了JS实现跟随鼠标闪烁转动色块的方法,涉及javascript操作html元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • canvas实现环形进度条效果

    canvas实现环形进度条效果

    本文主要介绍了canvas实现环形进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • event对象获取方法总结在google浏览器下测试

    event对象获取方法总结在google浏览器下测试

    Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，Event对象的获取方法如下，感兴趣的朋友可以参考下
    2013-11-11
  • uniapp中单选按钮的实现代码示例

    uniapp中单选按钮的实现代码示例

    uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下
    2023-01-01
  • 原生js实现自定义难度的扫雷游戏

    原生js实现自定义难度的扫雷游戏

    这篇文章主要为大家详细介绍了原生js实现自定义难度的扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 小程序通过小程序云实现微信支付功能实例

    小程序通过小程序云实现微信支付功能实例

    本文主要介绍了小程序通过小程序云实现微信支付功能实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • axios对外出口API的设计方法

    axios对外出口API的设计方法

    本文我们讲解了 axios 对外出口 API 是如何设计的,我们首先介绍了内部 Axios 类的实现,这是 axios 核心逻辑所在,其次为了让出口 API 更好使用,最后又在增加了 create() 方法,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-05-05
  • Javascript实现动态时钟效果

    Javascript实现动态时钟效果

    这篇文章主要为大家介绍了Javascript实现动态时钟效果，非常详细的注释代码，文具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现点击每个li节点，都弹出其文本值及修改

    js实现点击每个li节点，都弹出其文本值及修改

    本篇文章主要分享了js实现点击每个li节点，都弹出其文本值及修改的实例代码，具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12

最新评论