前端表单与计时器技巧-优快云博客

本文介绍了一些实用的前端技巧，包括使用JavaScript自动跳转文本框、设置与移除焦点、大写转换、select元素操作及计时器应用等。

 1 <script type="text/javascript">
 2 function checkLen(x,y)
 3 {
 4 if (y.length==x.maxLength)
 5     {
 6     var next=x.tabIndex
 7     if (next<document.getElementById("myForm").length)
 8         {
 9         document.getElementById("myForm").elements[next].focus()
10         }
11     }
12 }
13 </script>

在当前的text文本框中的输入的数字达到最大长度后自动跳转到下一个文本框

1 <p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
2 
3 <form id="myForm">
4 <input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
5 <input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
6 <input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
7 </form>

2：设置焦点和移除焦点的方法

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function setFocus()
 5   {
 6   document.getElementById('male').focus()
 7   }
 8 function loseFocus()
 9   {
10   document.getElementById('male').blur()
11   }
12 </script>
13 </head>
14 <body>
15 
16 <form>
17 Male: <input id="male" type="radio" name="Sex" value="Male" />
18 <br />
19 Female: <input id="female" type="radio" name="Sex" value="Female" />
20 <br />
21 <input type="button" onclick="setFocus()" value="Set focus" />
22 <input type="button" onclick="loseFocus()" value="Lose focus" />
23 </form>
24 
25 </body>
26 </html>

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function setFocus()
 5   {
 6   document.getElementById('button1').focus()
 7   }
 8 function removeFocus()
 9   {
10   document.getElementById('button1').blur()
11   }
12 </script>
13 </head>
14 <body>
15 
16 <form>
17 <input type="text" id="button1"  />
18 <br /><br />
19 <input type="button" onclick="setFocus()" value="设置焦点" />
20 <input type="button" onclick="removeFocus()" value="取消焦点" />
21 </form>
22 
23 </body>
24 </html>

3.较少用到的checkbox的简单用法，选中后将输入的内容改为大写

 1 <script type="text/javascript">
 2 function convertToUcase()
 3 {
 4 document.getElementById("fname").value=document.getElementById("fname").value.toUpperCase()
 5 document.getElementById("lname").value=document.getElementById("lname").value.toUpperCase()
 6 }
 7 </script>
 8 </head>
 9 
10 <body>
11 <form name="form1">
12 名：<input type="text" id="fname" size="20" />
13 <br /><br />
14 姓：<input type="text" id="lname" size="20" />
15 <br /><br />
16 转换为大写
17 <input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
18 </form>
19 </body>
20 
21 </html>

4.往select列表中添加选择项

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function insertOption()
 5   {
 6   var y=document.createElement('option');
 7   y.text='Kiwi'
 8   var x=document.getElementById("mySelect");
 9   try
10     {
11     x.add(y,null); 
12     }
13   catch(ex)
14     {
15     x.add(y); 
16     }
17   }
18 </script>
19 </head>
20 <body>
21 
22 <form>
23 <select id="mySelect">
24   <option>Apple</option>
25   <option>Pear</option>
26   <option>Banana</option>
27   <option>Orange</option>
28 </select>
29 <input type="button" onclick="insertOption()" value="Insert option" />
30 </form>
31 
32 </body>
33 </html>

从select下拉列表中删除某个选项

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function removeOption()
 5   {
 6   var x=document.getElementById("mySelect")
 7   x.remove(x.selectedIndex)
 8   }
 9 </script>
10 </head>
11 <body>
12 
13 <form>
14 <select id="mySelect">
15   <option>苹果</option>
16   <option>桃子</option>
17   <option>香蕉</option>
18   <option>桔子</option>
19 </select>
20 <input type="button" onclick="removeOption()" value="删除被选的选项">
21 </form>
22 
23 </body>
24 </html>

5.计时器

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 function startTime()
 5 {
 6 var today=new Date()
 7 var h=today.getHours()
 8 var m=today.getMinutes()
 9 var s=today.getSeconds()
10 m=checkTime(m)
11 s=checkTime(s)
12 document.getElementById('txt').innerHTML=h+":"+m+":"+s
13 t=setTimeout('startTime()',500)
14 }
15 
16 function checkTime(i)
17 {
18 if (i<10) 
19   {i="0" + i}
20   return i
21 }
22 </script>
23 </head>
24 
25 <body onload="startTime()">
26 <div id="txt"></div>
27 </body>
28 </html>

点击按钮后文本框内开始计时，点击另外一个按钮则会停止计时

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 var c=0
 5 var t
 6 function timedCount()
 7 {
 8 document.getElementById('txt').value=c
 9 c=c+1
10 t=setTimeout("timedCount()",1000)
11 }
12 
13 function stopCount()
14 {
15 clearTimeout(t)
16 }
17 </script>
18 </head>
19 
20 <body>
21 <form>
22 <input type="button" value="开始计时！" onClick="timedCount()">
23 <input type="text" id="txt">
24 <input type="button" value="停止计时！" onClick="stopCount()">
25 </form>
26 
27 <p>
28 请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
29 </p>
30 
31 </body>
32 
33 </html>

6.另外一种屏蔽数字的方法

 1 <html>
 2 <body>
 3 <script type="text/javascript">
 4 function noNumbers(e)
 5 {
 6 var keynum
 7 var keychar
 8 var numcheck
 9 
10 if(window.event) // IE
11     {
12     keynum = e.keyCode
13     }
14 else if(e.which) // Netscape/Firefox/Opera
15     {
16     keynum = e.which
17     }
18 keychar = String.fromCharCode(keynum)
19 numcheck = /\d/
20 return !numcheck.test(keychar)
21 }
22 </script>
23 
24 <form>
25 Type some text (numbers not allowed):
26 <input type="text" onkeypress="return noNumbers(event)" />
27 </form>
28 
29 </html>