JavaScript中文本光标定位

最新推荐文章于 2022-10-13 16:57:22 发布

deng131

最新推荐文章于 2022-10-13 16:57:22 发布

阅读量104

点赞数

分类专栏： javascript 文章标签： JavaScript IE WordPress Chrome Java ViewUI

javascript 专栏收录该内容

138 篇文章 0 订阅

订阅专栏

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

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

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