使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置 -

zhangdaiscott1

浏览: 57123 次
性别:
来自: 北京

最近访客更多访客>>

luk7152

Csupport

wangmeili567890

liss17

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置

JavaScript实现的通过输入框中的数据长度来控制光标焦点的位置：

在IE中可以使用 onPropertyChange 属性来控制非常简单例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

<BODY>
<INPUT TYPE="text" NAME="ipt" onPropertyChange="lostFocus(this,5)">
<INPUT TYPE="text" NAME="ipt2" onPropertyChange="lostFocus(this,5)">
</BODY>
</HTML>

以上代码在IE内核的浏览器中运行良好，但是用火狐就是不行，好像是火狐中根本就不支持onPropertyChange属性，要用oninput并添加addeventlistener，在网上找了一下看到了一下的代码，是通过setInterval去定时检查输入框中的数据长度，当为指定的值的时候就改变光标位置：

<html>
<script>
var insObj=new Array();
var timer=null;
function $(id){return document.getElementById(id)};
/*
function changeInspector(id){
insObj[id]=""+$(id).value;
timer=setInterval("inspector('"+id+"')",100);
}
function inspector(sid){
if($(sid).value!=insObj[sid]){
alert("property changed");
insObj[sid]=$(sid).value;
}
}
*/
function changeInspector(id){
//insObj[id]=""+$(id).value.length;
timer=setInterval("inspector('"+id+"')",100);
}
function inspector(sid){
if($(sid).value.length==3){
$('mm2').focus();
//insObj[sid]=$(sid).value;
}
}
function doinspector(){
changeInspector("mm");
changeInspector("mm2");
}
</script>
<body onload="doinspector()">
<input type="text" id="mm" value=""></input>
<input type="text" id="mm2" value=""></input>
<input type="button" onclick="document.getElementById('mm').value='aa'" value="改变值"></input>
</body></html>

这样是可以实现要求的，但是问题出来了，就是你输入长度为3的数据的时候光标到达下一个框，这时候你要想修改刚才的内容换句话说要把光标重新放回去就不可能了，因为每100毫秒就检查一次只要是3就改变光标位置嘛，所以这样使用起来会很不方便，不过这种想法还是可以的。

以下是兼容的代码（火狐中使用oninput）:

<div id="msg"></div>
<input type="text" id='txt' value="" />
<script>
//当状态改变的时候执行的函数
function handle()
{
//alert('asdf');
document.getElementById('msg').innerHTML='输入的文字长度为：'+document.getElementById('txt').value.length;
}
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
if(/msie/i.test(navigator.userAgent)) //ie浏览器
{
document.getElementById('txt').onpropertychange=handle
}
else
{//非ie浏览器，比如Firefox
document.getElementById('txt').addEventListener("input",handle,false);
}
</script>

以上代码就可以实现兼容了（PS:火狐的代码检查还真是严格，刚开始没写 input 的type在IE可以在火狐就是不可以后来加上就可以了）

不过在调试的时候还是浪费了不少的时间，因为在IE里加载页面后就显示：输入的内容是0。但是在火狐里死活是不显示的只有输入了内容之后才显示，一开始我以为又有不兼容问题所以就调了半天最后没有办法了我就试试输入了数据结果可以，狂晕！！现在想想是因为刚开始加载页面的时候是没有事件产生的所以火狐一向“严谨”的作风就不会调用handle了，但是IE不叫宽松就加载了handle函数，当然也许是因为两家浏览器对addEventListener事件的理解不同。

在这里要说一下的是在<input>中可以使用onPropertyChange 在同时也可以使用 oninput这个现象很好，这样就可以傻瓜式的实现浏览器的“兼容了”（直接写两个事件就好）。写一个的话就只有用onload了，但是我还不知道怎么实现。。。

分享到：