使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
2010-07-27 20:06
961 查看
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"> <!-- function lostFocus(obj,length){ var o=document.all; var objLength=obj.value.length;//全角2个字符 for(var i=0;i<o.length;i++){ if(o[i]==obj&&parseInt(objLength)==length){ if((i+1)==o.length){ alert("已经输入完毕!"); return; } else o[i+1].focus(); } } } //--> </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了,但是我还不知道怎么实现。。。 |
相关文章推荐
- 使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
- 如何通过js实现页面光标位置的控制
- js实现的光标位置工具函数示例
- Android使用webview控件加载本地html,通过Js与后台Java实现数据的传递
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
- 创建存储过程,以部门编号为参数返回该部门的人数及平均工资(返回一个值可以通过函数来实现,但如果要返回多个值,需要使用out或in out模式参数实现)
- 歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)
- 通过自定义属性存储数据实现输入框获得焦点与失去焦点改变value值
- JS控制输入框,并固定光标focus到不合法的输入框
- Vue.js使用-组件示例(实现数据的CRUD)
- AJAX提交表单后要清空,否则再次提交原来的数据会认为重复提交,提交失败。使用ajaxSubmit 函数需要引入jquery.form.min.js 文件
- CDHtmlDialog的基本使用(JS调用C++函数的实现)
- MFC中如何使用OnTimer()函数实现定时控制
- 使用腾讯地图和js,html实现地理位置的获取
- 通过js根据接收的数据控制select标签的默认选择项
- JS控制光标定位,定位到文本的某个位置
- JS控制输入框长度
- js实现关于数据字典的使用和数据存放的策略
- 用JAVA实现将execl表格中多行数据复制粘贴到现有页面上(js控制)
- 使用js实现按钮控制文本框加1减1应用于小时+分钟