HTML中输入框自动切换到下一个
最近看了部关于乔布斯的电影,感觉里面的电影情节还是很棒的。
就是软件开发者一定要考虑到用户的感受,一定要能非常简单的使用起来。
最近感觉公司的一些平台还是存在很多不好使用的地方。比如输入IP的输入框。
现在的设计是需要用户输入点号。
我想能不能设计成类似于windows的那种输入的方式。
设计为四个输入框,其中点号已经添加进去了。
其中那一段脚本必须要放入body内,否则无法识别到这个函数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>IP添加方式改变</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <form id="myForm"> <table align="center" border="1px" cellpadding="0" cellspacing="0"> <tr> <td align="center"> IP添加方式 </td> </tr> <tr> <td> <input tabindex="1" type="text" size="3" maxlength="3" onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)" /> . <input tabindex="2" type="text" size="3" maxlength="3" onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)" /> . <input tabindex="3" type="text" size="3" maxlength="3" onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)"/> . <input tabindex="4" type="text" size="3" maxlength="3" onkeyup="checkLen(this,this.value)" onkeypress="return checkNum(event)"/> </td> </tr> </table> </form> </body> <script type="text/javascript"> function checkLen(x, y) { if (y.length == x.maxLength) { var next = x.tabIndex; //是否到了最后一个文本框 if (next < document.getElementById("myForm").length) { document.getElementById("myForm").elements[next].focus(); } } }
function checkNum(e) { var keynum var keychar var numcheck if(window.event) // IE { keynum = e.keyCode } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which } keychar = String.fromCharCode(keynum) numcheck = /\d/; return numcheck.test(keychar) } </script> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。