日期:2014-05-16  浏览次数:20453 次

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

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方法
<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
1 楼 qingtian16265 2010-09-03  
怎么不截个效果图上来啊,那样看起来会比较直观~~~
2 楼 EldonReturn 2010-09-04  
光标定位在Rich Text Editor的开发中是一个重要的话题
一般就是用Selection+Range的组合来记录和恢复光标的位置