表单相关特效整理

2006-01-05 14:11:40

只能是一些限定的东西 运行代码框 [code]ENTER键可以让光标移到下一个输入框 <input onkeydown=&#34;if(event.keyCode==13)event.keyCode=9&#34; > <br> 只能是中文<input onkeyup=&#34;value=value.replace(/[ -~]/g,&#39;&#39;)&#34; onkeydown=&#34;if(event.keyCode==13)event.keyCode=9&#34;> <br> 屏蔽输入法<input style=&#34;ime-mode:disabled&#34; onkeydown=&#34;if(event.keyCode==13)event.keyCode=9&#34;> <br> 只能输入英文和数字<input onkeyup=&#34;value=value.replace(/[\W]/g,&#39;&#39;) &#34;onbeforepaste=&#34;clipboardData.setData(&#39;text&#39;,clipboardData.getData(&#39;text&#39;).replace(/[^\d]/g,&#39;&#39;))&#34; onkeydown=&#34;if(event.keyCode==13)event.keyCode=9&#34;> <br> 只能是数字<input onkeyup=&#34;value=value.replace(/[^\d]/g,&#39;&#39;) &#34;onbeforepaste=&#34;clipboardData.setData(&#39;text&#39;,clipboardData.getData(&#39;text&#39;).replace(/[^\d]/g,&#39;&#39;))&#34;><br> 只能显示,不能修改<input readonly value=&#34;只能显示,不能修改&#34;> [/code] 只能是数字,判断按键的值。 运行代码框 [code]<script language=javascript> function onlyNum() { if(!((event.keyCode>=48&amp;&amp;event.keyCode<=57)||(event.keyCode>=96&amp;&amp;event.keyCode<=105)||(event.keyCode==8))) event.returnValue=false; } </script> <input onkeydown=&#34;onlyNum();&#34;> [/code] 附:获取键盘的KeyCode 运行代码框 [code]<html> <head> <script language=&#34;javascript&#34;> ns4 = (document.layers) ? true : false; ie4 = (document.all) ? true : false; function keyDown(e){ if(ns4){ var nkey=e.which; var iekey=&#39;现在是ns浏览器&#39;; var realkey=String.fromCharCode(e.which); } if(ie4){ var iekey=event.keyCode; var nkey=&#39;现在是ie浏览器&#39;; var realkey=String.fromCharCode(event.keyCode); if(event.keyCode==32){realkey=&#39;\&#39; 空格\&#39;&#39;} if(event.keyCode==13){realkey=&#39;\&#39; 回车\&#39;&#39;} if(event.keyCode==27){realkey=&#39;\&#39; Esc\&#39;&#39;} if(event.keyCode==16){realkey=&#39;\&#39; Shift\&#39;&#39;} if(event.keyCode==17){realkey=&#39;\&#39; Ctrl\&#39;&#39;} if(event.keyCode==18){realkey=&#39;\&#39; Alt\&#39;&#39;} } alert(&#39;ns浏览器中键值:&#39;+nkey+&#39;\n&#39;+&#39;ie浏览器中键值:&#39;+iekey+&#39;\n&#39;+&#39;实际键为&#39;+realkey); } document.onkeydown = keyDown; if(ns4){ document.captureEvents(Event.KEYDOWN);} </script> </head> <body> //Javascript Document. <hr> <center> <h3>请按任意一个键。。。。</h3> </center> </body> </html> [/code] 限制网页用键盘 运行代码框 [code]<body onkeydown=&#34;alert(&#39;禁用&#39;);return false;&#34;> 限制键盘的某个键:body onkeydown=&#34;if(event.keyCode==num){alert(&#39;禁用&#39;);return false;} [/code] 再加个找按键的值 [code]<script> function show(){ alert(&#34;ASCII代码是:&#34;+event.keyCode); } </script> <body onkeydown=&#34;show()&#34;> [/code] 只能是IP地址 运行代码框 [code]<html> <head> <meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34;> <meta name=&#34;GENERATOR&#34; content=&#34;Microsoft FrontPage 4.0&#34;> <meta name=&#34;ProgId&#34; content=&#34;FrontPage.Editor.Document&#34;> <style> .a3{width:30;border:0;text-align:center} </style> <script> function mask(obj){ obj.value=obj.value.replace(/[^\d]/g,&#39;&#39;) key1=event.keyCode if (key1==37 || key1==39) { obj.blur(); nextip=parseInt(obj.name.substr(2,1)) nextip=key1==37?nextip-1:nextip+1; nextip=nextip>=5?1:nextip nextip=nextip<=0?4:nextip eval(&#34;ip&#34;+nextip+&#34;.focus()&#34;) } if(obj.value.length>=3) if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0) { alert(parseInt(obj.value)+&#34;IP地址错误!&#34;) obj.value=&#34;&#34; obj.focus() return false; } else { obj.blur(); nextip=parseInt(obj.name.substr(2,1))+1 nextip=nextip>=5?1:nextip nextip=nextip<=0?4:nextip eval(&#34;ip&#34;+nextip+&#34;.focus()&#34;) } } function mask_c(obj) { clipboardData.setData(&#39;text&#39;,clipboardData.getData(&#39;text&#39;).replace(/[^\d]/g,&#39;&#39;)) } </script> <title>IP地址输入</title> </head> <body>IP地址输入 <div style=&#34;border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt&#34;> <input type=text name=ip1 maxlength=3 class=a3 onkeyup=&#34;mask(this)&#34; onbeforepaste=mask_c()>. <input type=text name=ip2 maxlength=3 class=a3 onkeyup=&#34;mask(this)&#34; onbeforepaste=mask_c()>. <input type=text name=ip3 maxlength=3 class=a3 onkeyup=&#34;mask(this)&#34; onbeforepaste=mask_c()>. <input type=text name=ip4 maxlength=3 class=a3 onkeyup=&#34;mask(this)&#34; onbeforepaste=mask_c()> </div> </body> </html> [/code] 用#default#savehistory防止后退清空text文本框: 运行代码框 [code]<HTML> <HEAD> <META NAME=&#34;save&#34; CONTENT=&#34;history&#34;> <STYLE> .saveHistory {behavior:url(#default#savehistory);} </STYLE> </HEAD> <BODY> <INPUT class=saveHistory type=text id=oPersistInput> <input type=button onclick=&#39;javascript:location.href=&#34;http://www.cnbruce.com/red/&#34;&#39; value=&#39;点击进入,再按后退键试试?&#39;> </BODY> </HTML> [/code] TEXTAREA自适应文字行数的多少 运行代码框 [code]<textarea rows=1 name=s1 cols=27 onpropertychange=&#34;this.style.posHeight=this.scrollHeight&#34;> [/code] 上传预览图片 运行代码框 [code]<img id=pic src=http://www.cnbruce.com/images/logo.gif> <input type=file name=file><input type=button onclick=pic.src=file.value value=预览图片> <input type=button onclick=alert(file.value) value=图片地址> <input type=button onclick=&#34;file.outerHTML=file.outerHTML.replace(/value=\w/g,&#39;&#39;)&#34; value=&#34;清除file里字&#34;> [/code] 去掉下拉选项的边框 [code]<div style=&#34;position: absolute; left: 10px; top: 10px; width: 115px; height: 20px; clip:rect(2 114 20 2);&#34;> <sel&#101;ct> <option >cnpeople</option> <option >cnrose</option> <option >cnbruce</option> </sel&#101;ct> </font> </div> [/code] 下拉列表打开窗口 运行代码框 [code]<sel&#101;ct onChange=&#34;if(this.sel&#101;ctedIndex &amp;&amp; this.sel&#101;ctedIndex!=0){window.open(this.value);}this.sel&#101;ctedIndex=0;&#34;> <option sel&#101;cted>更多链接……</option> <option value=&#34;http://www.cnbruce.com&#34;>cnbruce</option> <option value=&#34;http://daonet.myrice.com/old/&#34;>daonet</option> <option value=&#34;http://www.blueidea.com&#34;>blue!dea </sel&#101;ct> [/code] 通过下拉菜单传递跳转 运行代码框 [code]<form action=&#34;showlog.asp?&#34; > <sel&#101;ct name=&#34;cat_id&#34; onpropertychange=&#34;form.submit();&#34;> <option value=&#34;&#34;>==请选择==</option> <option value=&#34;11&#34;>11</option> <option value=&#34;22&#34;>22</option> </sel&#101;ct> </form> [/code] TAB键在文本域中的体现 运行代码框 [code]<script> function editTab() { var code, sel, tmp, r var tabs=&#34;&#34; event.returnValue = false sel =event.srcElement.document.sel&#101;ction.cr&#101;ateRange() r = event.srcElement.cr&#101;ateTextRange() switch (event.keyCode) { case (8) : if (!(sel.getClientRects().length > 1)) { event.returnValue = true return } code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) sel.setEndPoint(&#34;startToStart&#34;, tmp) sel.text = sel.text.replace(/^\t/gm, &#34;&#34;) code = code.replace(/^\t/gm, &#34;&#34;).replace(/\r\n/g, &#34;\r&#34;) r.findText(code) r.sel&#101;ct() break case (9) : if (sel.getClientRects().length > 1) { code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) sel.setEndPoint(&#34;startToStart&#34;, tmp) sel.text = &#34;\t&#34;+sel.text.replace(/\r\n/g, &#34;\r\t&#34;) code = code.replace(/\r\n/g, &#34;\r\t&#34;) r.findText(code) r.sel&#101;ct() } else { sel.text = &#34;\t&#34; sel.sel&#101;ct() } break case (13) : tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) tmp.setEndPoint(&#34;endToEnd&#34;, sel) for (var i=0; tmp.text.match(/^[\t]+/g) &amp;&amp; i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += &#34;\t&#34; sel.text = &#34;\r\n&#34;+tabs sel.sel&#101;ct() break default : event.returnValue = true break } } </script> <textarea cols=75 rows=20 onkeydown=&#34;editTab()&#34;> <script> alert(&#34;ok&#34;) </script></textarea> [/code] 文本框的上/下拉 运行代码框 [code]<form name=&#34;cnbruce&#34;> <textarea name=&#34;com&#34;> </textarea> </form> <SPAN title=&#39;放大输入框&#39; style=&#39;FONT-SIZE: 12px; CURSOR: hand&#39; onclick=document.cnbruce.com.rows+=4>向下</SPAN> <SPAN title=&#39;缩小输入框&#39; style=&#39;FONT-SIZE: 12px; CURSOR: hand&#39; class=&#39;arrow&#39; onclick=&#39;if(document.cnbruce.com.rows>=4)document.cnbruce.com.rows-=4;else return false&#39;>向上</SPAN> [/code] 一个复选框,点击之后一组复选框全部都选上 运行代码框 [code]<input type=&#34;checkbox&#34; name=&#34;checkA&#34; onpropertychange=&#34;for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked}&#34;>a <br> <span id=&#34;A&#34;> <input type=&#34;checkbox&#34; name=&#34;A1&#34;> <input type=&#34;checkbox&#34; name=&#34;A2&#34;> <input type=&#34;checkbox&#34; name=&#34;A3&#34;> </span> [/code] Debug Textarea:在线写 js 脚本的时候,用来即时查错的东西! 运行代码框 [code]<HTML> <HEAD> <TITLE>Debug Textarea</TITLE> <meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=gb2312&#39;> </HEAD> <style> * { font-size: 12px } body { margin: 10px; padding: 0px } table.list{ cursor: default; border:1px solid #cccccc background-color: #cccccc; border-collapse: collapse; border-Color: #cccccc; } </style> <script language=&#34;javascript&#34;> // Coded by windy_sk <windy_sk@126.com> 20040205 function reportError(msg,url,line) { var str = &#34;You have found an error as below: \n\n&#34;; str += &#34;Err: &#34; + msg + &#34; on line: &#34; + line; alert(str); return true; } window.onerror = reportError; document.onkeydown = function() { if(event.ctrlKey){ switch(event.keyCode) { case 82: //r runcode(); break; case 83: //s savecode(); break; case 71: //g goto(prompt(&#39;Please input the line number&#39;, &#39;1&#39;)); break; case 65: //a document.execCommand(&#34;Sel&#101;ctAll&#34;); break; case 67: //c document.execCommand(&#34;Copy&#34;); break; case 88: //x document.execCommand(&#34;Cut&#34;); break; case 86: //v document.execCommand(&#34;Paste&#34;); break; case 90: //z document.execCommand(&#34;Undo&#34;); break; case 89: //y document.execCommand(&#34;Redo&#34;); break; default: break; } event.keyCode = 0; event.returnValue = false; } return; } function show_ln(){ var txt_ln = document.getElementById(&#39;txt_ln&#39;); var txt_main = document.getElementById(&#39;txt_main&#39;); txt_ln.scrollTop = txt_main.scrollTop; while(txt_ln.scrollTop != txt_main.scrollTop) { txt_ln.value += (i++) + &#39;\n&#39;; txt_ln.scrollTop = txt_main.scrollTop; } return; } function editTab(){ var code, sel, tmp, r var tabs=&#39;&#39; event.returnValue = false sel =event.srcElement.document.sel&#101;ction.cr&#101;ateRange() r = event.srcElement.cr&#101;ateTextRange() switch (event.keyCode){ case (8) : if (!(sel.getClientRects().length > 1)){ event.returnValue = true return } code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) // 出错检验代码~~~~~~ if(sel.parentElement() != tmp.parentElement()) return; sel.setEndPoint(&#39;startToStart&#39;, tmp) sel.text = sel.text.replace(/^\t/gm, &#39;&#39;) code = code.replace(/^\t/gm, &#39;&#39;).replace(/\r\n/g, &#39;\r&#39;) r.findText(code) r.sel&#101;ct() break case (9) : if (sel.getClientRects().length > 1){ code = sel.text tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) // 出错检验代码~~~~~~ if(sel.parentElement() != tmp.parentElement()) return; sel.setEndPoint(&#39;startToStart&#39;, tmp) sel.text = &#39;\t&#39;+sel.text.replace(/\r\n/g, &#39;\r\t&#39;) code = code.replace(/\r\n/g, &#39;\r\t&#39;) r.findText(code) r.sel&#101;ct() }else{ sel.text = &#39;\t&#39; sel.sel&#101;ct() } break case (13) : tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) // 出错检验代码~~~~~~ if(sel.parentElement() != tmp.parentElement()) return; tmp.setEndPoint(&#39;endToEnd&#39;, sel) for (var i=0; tmp.text.match(/^[\t]+/g) &amp;&amp; i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += &#39;\t&#39; sel.text = &#39;\r\n&#39;+tabs sel.sel&#101;ct() break default : event.returnValue = true break; } return; } function runcode() { var str = document.getElementById(&#34;txt_main&#34;).value; var code_win = window.open(&#39;about:blank&#39;); code_win.document.open(); code_win.document.writeln(&#34;<script>&#34;); code_win.document.writeln(&#34;function reportError(msg,url,line){\nline-=14;\nvar str=&#39;You have found an error as below: \\n\\n&#39;;\nstr+=&#39;Err: &#39;+msg+&#39; on line: &#39;+(line);\nalert(str);\nopener.goto(line);\nopener.focus();\nwindow.onerror=null;\nsetTimeout(&#39;self.close()&#39;,10);\nreturn true;\n}&#34;); code_win.document.writeln(&#34;window.onerror = reportError;&#34;); code_win.document.writeln(&#34;<\/script>&#34;); code_win.document.writeln(str); code_win.document.close(); return; } function savecode() { var str = document.getElementById(&#34;txt_main&#34;).value; var code_win = window.open(&#39;about:blank&#39;,&#39;_blank&#39;,&#39;top=10000&#39;); code_win.document.open(); code_win.document.writeln(str); code_win.document.close(); code_win.document.execCommand(&#39;saveas&#39;,&#39;&#39;,&#39;code.html&#39;); code_win.close(); return; } function goto(ln) { if(!/^\d+$/.test(ln)) return; var obj = document.getElementById(&#34;txt_main&#34;); var rng = obj.cr&#101;ateTextRange(); var arr = obj.value.replace(/\r/, &#34;&#34;).split(/\n/); if(ln>arr.length) ln = arr.length; var str_tmp = &#34;&#34;; for(var i=0; i<ln-1; i++) { str_tmp += arr[i]; } rng.moveStart(&#39;character&#39;,str_tmp.length+1); str_tmp = &#34;&#34;; for(i=ln; i<arr.length; i++) { str_tmp += arr[i]; } rng.moveEnd(&#39;character&#39;,-str_tmp.length); rng.sel&#101;ct(); return; } window.onload = function() {document.getElementById(&#34;txt_main&#34;).value = &#34;<script>\nalert(&#39;)\n<\/script>&#34;;} </script> <BODY> <table width=&#39;600&#39; class=&#39;list&#39; border=&#39;1&#39; bgcolor=&#39;#eeeeee&#39; bordercolorlight=&#39;#000000&#39; bordercolordark=&#39;#FFFFFF&#39; cellpadding=&#39;0&#39; cellspacing=&#39;0&#39;> <tr bgcolor=&#39;#cccccc&#39;> <td colspan=&#39;2&#39; height=&#39;20&#39; align=&#39;center&#39;><b>Debug Textarea</b></td> </tr> <tr> <td colspan=&#39;2&#39;> <table width=&#39;95%&#39; border=&#39;0&#39; align=&#39;center&#39; > <tr> <td align=&#39;center&#39;><br /> <textarea id=&#39;txt_ln&#39; name=&#39;content&#39; rows=&#39;10&#39; style=&#39;width:40px;overflow:hidden;height:200px;border-right:0px;text-align:right;line-height:14px&#39; onsel&#101;ctstart=&#39;this.nextSibling.focus();return false&#39; readonly></textarea><textarea id=&#39;txt_main&#39; name=&#39;content&#39; rows=&#39;10&#39; cols=&#39;80&#39; onkeydown=&#39;editTab()&#39; onkeyup=&#39;show_ln()&#39; onscroll=&#39;show_ln()&#39; wrap=&#39;off&#39; style=&#39;overflow:auto;height:200px;padding-left:5px;border-left:0px;line-height:14px&#39;></textarea> <script>for(var i=1; i<=20; i++) document.getElementById(&#39;txt_ln&#39;).value += i + &#39;\n&#39;;</script> </td> </tr> <tr> <td align=&#39;center&#39;><br /> <input type=&#39;button&#39; value=&#39; 运 行 &#39; onclick=&#39;runcode()&#39; accesskey=&#39;r&#39;>   <input type=&#39;button&#39; value=&#39; 保 存 &#39; onclick=&#39;savecode()&#39; accesskey=&#39;s&#39;>   <input type=&#39;button&#39; value=&#39; 跳 转 &#39; onclick=&#34;goto(prompt(&#39;Please input the line number&#39;, &#39;1&#39;))&#34; accesskey=&#39;g&#39;>   </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> [/code]