js获取光标位置的方法

最新推荐文章于 2024-04-24 15:42:33 发布

heikeji

最新推荐文章于 2024-04-24 15:42:33 发布

阅读量494

点赞数

分类专栏： javascript java html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/heikeji/article/details/84383744

版权

javascript 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

java

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

1、====使用TextRange获取输入框中光标的位置====

TextRange是用来表现HTML元素中文字的对象，虽然我们平时不太常用这个对象，可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩，那么我们能拿它做些什么呢？
TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作，比如变化、删除、新增等。但其经典的用途却是，在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途，比如：限制输入的MaskTextBox，其核心技术点就是获取输入框的光标位置，然后使用正则表达式判断输入内容。

获取输入框中的光标位置的整个代码其实很短，只是这些对象和方法不太常用而已。

<script type="text/javascript">
    function GetCursorPsn(txb){
        var slct = document.selection;
        var mg = slct.createRange();
        txb.select();
        mg.setEndPoint("StartToStart",slct.createRange());
        var psn = rng.text.length;
        mg.collapse(false);
        mg.select();
        return psn;
    }
</script>

这里说一下使用这个GetCursorPsn()方法后，会给输入框操作带来的副作用。对于输入框<input type="text" οnkeydοwn="GetCursorPsn(this)">，它将不能再使用Shift+左右这两个方向键来选择文本；对于<textarea οnkeydοwn="GetCursorPsn(this)"></textarea>，将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后，调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题，所以基本不用太在意。

2、====JavaScript获取textarea中光标的位置====

<HTML>
 <HEAD>
  <TITLE> TEST </TITLE>
  <style>
    body,td{
      font-family:verdana,arial,helvetica,sans-serif;
      font-size:12px;
    }
  </style>
  <script type="text/javascript">
    var start = 0;
    var end = 0;
    function add(){
	var textBox = document.getElementById("ta");
	var pre = textBox.value.substr(0,start);
	var post = textBox.value.substr(end);
	textBox.value = pre + document.getElementById("inputtext").value 
			+ post;
    }
	
    function savePos(textBox){
	//如果是Firefox（1.5）的话，方法很简单
	if(typeof(textBox.selectionStart) == "number"){
	    start = textBox.selectionStart;
	    end = textBox.selectionEnd;
	}
	//下面是IE（6.0）的方法，较为复杂，还要计算上“\n”
	else if(document.selection){
	    var range = document.selection.createRange();
	    if(range.parentElement().id == textBox.id){
		//create a selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(textBox);
		//两个range，一个是已经选择的text(range)，
 		  一个是整个textarea(range_all)
		//range_all.collpareEndPoints()比较两个端点，
		  如果range_all比range更往左（further to the left）,
		  则返回小于0的值，range_all往右移一点，直到两个range的start相同。
		//calculate selection start point by moving beginning of 
		  range_all to beginning of range
		for(start=0;range_all.compareEndPoints("StartToStart",
		    range)<0;start++){
		    range_all.moveStart('character',1);
		}
		//get number of line breaks from textarea start to selection
      		  start and add them to start
		//计算一下‘\n’
		for(var i=0; i<=start;i++){
		    if(textBox.value.charAt(i) == '\n')
			start++;
		}
		//create a selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(textBox);
		//calculate selection end point by moving beginning of 
		  range_all to end of range
		for(end=0;range_all.compareEndPoints('StartToStart',range)<0;
		    end++){
		    range_all.moveStart('character',1);
		}
		//get number of line breaks from textarea start to selection
		  end and add them to end
		for(var i=0;i<=end;i++){
		    if(textBox.value.charAt(i)=='\n')
			end ++;
		}
	    }
	}
	document.getElementById("start").value = start;
	document.getElementById("end").value = end;
    }
  </script>
 </HEAD>

 <BODY>
  <form name="formname" method="post" action="">
	<table border="1" cellspacing="0" cellpadding="0">
	  <tr>
		<td>start:<input type="text" id="start" size="3" /><td>
		<td>end:<input type="text" id="end" size="3" /><td>
	  </tr>
	  <tr>
		<td colspan="2">
		  <textarea id="ta" 
			οnkeydοwn="savePos(this)" 
			οnkeyup="savePos(this)" 
			οnmοusedοwn="savePos(this)" 
			οnmοuseup="savePos(this)" 
			rows="14" cols="50">
		  </textarea>
		</td>
	  </tr>
	  <tr>
		<td><input type="text" id="inputtext" /></td>
		<td>
		  <input type="button" οnclick="add()" value="Add Text" />
		</td>
	  </tr>
	</table>
  </form>
 </BODY>
</HTML>

heikeji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取光标位置的方法

1、====使用TextRange获取输入框中光标的位置==== TextRange是用来表现HTML元素中文字的对象，虽然我们平时不太常用这个对象，可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩，那么我们能拿它做些什么呢？ TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作，比如变化、删除、新增等。但其经典...
复制链接

扫一扫

专栏目录