当前位置: 首页 > 编程笔记 >

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

景帅
2023-03-14
本文向大家介绍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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Javascript实现获取及设置光标位置的方法,包括了Javascript实现获取及设置光标位置的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Javascript实现获取及设置光标位置的方法。分享给大家供大家参考。具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE、Firefox、Opera等主流浏览器的获

  • 本文向大家介绍JS在可编辑的div中的光标位置插入内容的方法,包括了JS在可编辑的div中的光标位置插入内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下: 首先要让DIV启用编辑模式 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以

  • 本文向大家介绍jquery实现在光标位置插入内容的方法,包括了jquery实现在光标位置插入内容的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 我正在构建一个包含许多类的Javafx应用程序。我想使用所有类的java日志记录。但所有选项似乎都伴随着过多或重复的代码。以下是我能想到的: > 声明Logger为每个类中的私有静态最终字段,即: 私有静态最终记录器LOGGER=Logger.get记录器(MyClass.class.getName()); 这个选项似乎有点烦人,每次上课都要这么做。 又一次似乎不优雅 你们怎么处理这种情况?这只是

  • 您是否碰巧知道如何返回(并进一步返回)到Visual Code Editor中以前的光标位置? 到目前为止,我所做的只是快速的“撤消”和“重做”,只是为了看看我在哪里,但这不仅是愚蠢的,而且非常有限,因为它可以回到最后一个光标位置,而不是无法进一步返回。 用例场景: < li>1)您在1号线,在那里做了一些事情。 < li>2)然后,您转到第100行,并在那里做了其他事情。 < li>3)您转到第

  • 本文向大家介绍Javascript 获取鼠标当前的位置实现方法,包括了Javascript 获取鼠标当前的位置实现方法的使用技巧和注意事项,需要的朋友参考一下 有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1、客户区坐标位置   鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 client