javascript 光标定位

输入数字移动光标在文本框中

最新推荐文章于 2022-10-12 20:43:20 发布

最新推荐文章于 2022-10-12 20:43:20 发布 · 89 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个简单的JavaScript脚本，用于在文本框中根据输入的数字移动光标位置，包括处理非数字输入的错误提示。

<mce:script type="text/javascript"></mce:script> </head> <body> <input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回操曰:“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。" size="100" /><br /> 移动光标到第<input type="text" name="txtNum" size="5" />个位置 <input type="button" name="btnMove" value="确定" onclick="moveCursor()" /> </body>

// /*2光标放在最前面ie中OK，firefox中无效果*/
// function moveCursor(){
// var textTest=document.getElementsByName("txtTest");
// var r=txtTest.createTextRange();
// r.collapse();
// r.select();
// }

/*3光标放在最后面ie中OK，firefox中无效果*/
// function moveCursor(){
// var textTest=document.getElementsByName("txtTest");
// var r=txtTest.createTextRange();
// r.collapse(false);
// r.select();
// }

/*4选取input框中部分内容需要用到Range的moveStart或moveEnd方法，其详细的方法使用可以参考MSDN*/
//function sl(o,m,n){
// var rt=o.createTextRange();
// rt.collapse();
// rt.select();//光标移到最前
// var r=document.selection.createRange();
// r.collapse(false);
// r.moveStart("character",m);//从m位开始
// r.moveEnd("character",n);//选取n位
// r.select();
//}
<input name="a" value="12344563789" />
<input type="button" value="select" onclick="sl(a,2,4)"/>

/*5光标的移动和位置*/
function setpos(obj,n)
{
obj.focus();
var r=document.selection.createRange();
r.collapse(false);
r.move("character",n);
r.select();

}

function getpos(obj)//得到文本框内光标的位置
{
obj.focus();//光标位置不变
var r=document.selection.createRange();
r.collapse(false);
r.setEndPoint("StartToStart",obj.createTextRange());
alert(r.text.length);
}

例五
<input type="button" value="向前" onclick="setpos(a,-1)"/>
<input type="button" value="向后" onclick="setpos(a,1)"/>
<input type="button" value="当前光标的位置" onclick="getpos(a)" />