JavaScript中文本光标定位

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

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

document.getElementById(“cargoCount”).focus();//定位光标到数量框

还有需求涉及到定位到第几位字段上。

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

IE：

FF：

//DOM Level 2中定义了方法creatRange()来创建范围

var oRange = document.createRange();

DOM下selectNode和selectNodeContent方法

<p id=”id1″><b>Hello</b>World</p>

var oRange1 = document.createRange();

var oRange2 = document.createRnage();

var oP1 = document.getElementById(“id1″);

oRange1.selectNode(oP1);

oRange2.selectNodeContents(oP1);

selectNode()获取到的oRange1是<p id=”id1″><b>Hello</b>World</p>

selectNodeContent()获取到的oRange2是<b>Hello</b>World

参考：

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为光标要移动到的位置。

jQuery中光标定位

$(“#siteUrl”).val(‘http://’);

$(“#siteUrl”).focus();

IE6下光标会定位在前面：



而将两行代码换过来：

$(“#siteUrl”).focus();

$(“#siteUrl”).val(‘http://’);

IE6下光标会定位在后面：