HTML中輸入框自動切換到下一個
阿新 • • 發佈：2019-02-09
最近看了部關於喬布斯的電影，感覺裡面的電影情節還是很棒的。
就是軟體開發者一定要考慮到使用者的感受，一定要能非常簡單的使用起來。
最近感覺公司的一些平臺還是存在很多不好使用的地方。比如輸入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>
