小技巧3
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>