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了,但是我还不知道怎么实现。。。
相关推荐
C语言程序设计-编写函数实现两个数据的交换,在主函数中输入任意三个数据,调用函数对这三个数据从大到小排序;.c
动态列报表,使用参数控件联动筛选需要展示的列的数据,该资源包下包含了已经完成的模板和JS以及所使用的函数公式。
1.QT通过QWebEngineView模块加载百度地图,通过QWebChannel 调用JS函数实现与地图数据交互。 2.点击pushButton按钮QT会调用JS函数在地图页做标注,通过上面两个输入框输入经纬度(c++调用JS)。 3.鼠标点击地图页后...
实例004——使用函数模板实现不同数据类型的极值函数 实例004——使用函数模板实现不同数据类型的极值函数 实例004——使用函数模板实现不同数据类型的极值函数
用InputBox函数创建一个可输入数据的对话框
使用S-Function函数实现离散PID控制器,并建立simulink仿真模型。 使用S-Function函数实现离散PID控制器,并建立simulink仿真模型。
使用Element带输入建议的输入框来实现此需求。用法详见官网 1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据 看了一下例子,建议列表应该是个数组,然后我就在querySearch里直接返回了一...
C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用
kettle中使用javascript步骤和fireToDB函数实现自定义数据库查询
vue实现输入框的模糊查询的示例代码(节流函数的应用场景).docx
jQuery扩展函数,用于获取设置textarea中光标位置
对于我们这里讨论的内容,最有用的是插值 函数,它可以让我们从文本文件中读入数据。假设我们有一个文本文件,其中包含时间行数据以及当时激光焦点的 x 和 y 位置。 我的工程文件中可以导出插入的文本文件 实现激光...
js 函数 javaScript 自定义函数一览表 js 函数 javaScript 自定义函数一览表
Delphi__调用API函数实现数据发送.rarDelphi__调用API函数实现数据发送.rarDelphi__调用API函数实现数据发送.rar
在console下,用VC实现的光标移动控制,用到win api函数。有了这个,就可以很方便的在console下写ui程序了。 其中实现有: /* 将光标移到指定位置*/ void JR_SetCursor(int x, int y); /* 将光标移到左上角 */ void...
内容概要:主要讲解JS代码实现excel宏编程,从基础到进阶,另外也可作为函数查找手册用,或者帮助文档用;使用JS代码宏编程的优势就是运行快、代码简单易上手、且由于代码提示作用使得代码编写极快。提高工作效率。 ...
C语言编程-编写函数fun求一个字符串的长度,在main函数中输入字符串,并输出其长度;
# 题目:使用lambda来创建匿名函数。
编写一个程序,求字符串的长度,不能使用strlen函数。 (代码提示:i=0;while(s[i]!= '\0')i++; 则最后i的值就是字符串长度)
内容概要:主要讲解JS代码实现excel宏编程,从基础到进阶,另外也可作为函数查找手册用,或者帮助文档用;使用JS代码宏编程的优势就是运行快、代码简单易上手、且由于代码提示作用使得代码编写极快。提高工作效率。 ...