JavaScript中文本光标定位

最新推荐文章于 2024-07-29 20:30:00 发布

abxn2002

最新推荐文章于 2024-07-29 20:30:00 发布

阅读量671

点赞数

分类专栏：前端学习笔记

前端学习笔记专栏收录该内容

99 篇文章

订阅专栏

本文介绍了在不同浏览器中实现光标定位的方法，包括IE、Firefox和Chrome等，并提供了JavaScript代码示例，展示了如何获取和设置光标位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载地址:http://levi.cg.am/archives/1448

项目中客户要求选择商品后，光标直接定位到数量输入框上，来简化操作。

document.getElementById(“cargoCount”).focus();//定位光标到数量框
还有需求涉及到定位到第几位字段上。

 
        function 
        setMouse(){ 
       
        var 
        e = event.srcElement; 
       
        var 
        r = e.creatTextRange(); 
       
        r.moveStart( 
        'character' 
        ,2); 
       
        r.collapse( 
        true 
        ); 
       
        r.select(); 
       
        }

在IE浏览器下使用是createTextRange而Firefox/chrome等浏览器下使用setSelectionRange

IE：

 
        var 
        range = obj.createTextRange(); 
       
        range.moveStart( 
        "character" 
        , 开始序号); 
       
        range.moveEnd( 
        "character" 
        , 结束序号); 
       
        range.select();

FF：

 
        obj.setSelectionRange(开始序号, 结束序号); 
       
        obj.focus();

//DOM Level 2中定义了方法creatRange()来创建范围
var oRange = document.createRange();
DOM下selectNode和selectNodeContent方法
HelloWorld
var oRange1 = document.createRange();
var oRange2 = document.createRnage();
var oP1 = document.getElementById(“id1″);
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);

selectNode()获取到的oRange1是HelloWorld
selectNodeContent()获取到的oRange2是HelloWorld

参考：
http://hi.baidu.com/wangjiashui/blog/item/da1e4e6eabbe96dc80cb4a29.html
http://www.zhangxinxu.com/wordpress/?p=755
http://blog.csdn.net/qiaogang2003/archive/2007/11/06/1870025.aspx

javascript获取光标位置以及设置光标位置

在项目开发中经常遇到input等设置光标位置到最后的问题，今天我查了一下Google，找到了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数。

function getCursortPosition (ctrl) {//获取光标位置函数
	var CaretPos = 0;	// IE Support
	if (document.selection) {
	ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return (CaretPos);
}

PS：参数ctrl为input或者textarea对象

function setCaretPosition(ctrl, pos){//设置光标位置函数
	if(ctrl.setSelectionRange)
	{
		ctrl.focus();
		ctrl.setSelectionRange(pos,pos);
	}
	else if (ctrl.createTextRange) {
		var range = ctrl.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}

PS：参数ctrl为input或者textarea对象，pos为光标要移动到的位置。