表单相关特效整理-wzabing-ChinaUnix博客

阿炳的世界

首页　| 　博文目录　| 　关于我

wzabing

博客访问： 103401
博文数量： 26
博客积分： 1410
博客等级：上尉
技术积分： 375
用户组：普通用户
注册时间： 2008-03-01 21:18

文章分类

全部博文（26）

服务器（3）

病毒防火墙（1）

windows 2003 ser（2）
WAP（1）
SEO（2）
手机（0）

电池（0）
数据库（1）

mysql（1）
随笔（3）
JAVA（2）

JSTL（1）
WEB（14）

php（2）

HTML（1）

CSS（2）

JS（9）
未分配的博文（0）

文章存档

2009年（2）

2008年（24）

我的朋友

最近访客

推荐博文

表单相关特效整理

分类：

2008-12-28 11:43:13

只能是一些限定的东西

运行代码框
ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9" > <br> 只能是中文<input onkeyup="value="/value.replace(/[" -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br> 屏蔽输入法<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br> 只能输入英文和数字<input onkeyup="value="/value.replace(/[\W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br> 只能是数字<input onkeyup="value="/value.replace(/["^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br> 只能显示，不能修改<input readonly value="只能显示，不能修改">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

只能是数字，判断按键的值。

运行代码框
<script language=javascript> function onlyNum() { if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)||(event.keyCode==8))) event.returnValue=false; } </script> <input onkeydown="onlyNum();">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

附：获取键盘的KeyCode

运行代码框
<html> <head> <script language="javascript"> ns4 = (document.layers) ? true : false; ie4 = (document.all) ? true : false; function keyDown(e){ if(ns4){ var nkey=e.which; var iekey='现在是ns浏览器'; var realkey=String.fromCharCode(e.which); } if(ie4){ var iekey=event.keyCode; var nkey='现在是ie浏览器'; var realkey=String.fromCharCode(event.keyCode); if(event.keyCode==32){realkey='\' 空格\''} if(event.keyCode==13){realkey='\' 回车\''} if(event.keyCode==27){realkey='\' Esc\''} if(event.keyCode==16){realkey='\' Shift\''} if(event.keyCode==17){realkey='\' Ctrl\''} if(event.keyCode==18){realkey='\' Alt\''} } alert('ns浏览器中键值:'+nkey+'\n'+'ie浏览器中键值:'+iekey+'\n'+'实际键为'+realkey); } document.onkeydown = keyDown; if(ns4){ document.captureEvents(Event.KEYDOWN);} </script> </head> <body> //Javascript Document. <hr> <center> <h3>请按任意一个键。。。。</h3> </center> <script type="text/javascript" src="/js/jquery.qqFace.js"></script> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

限制网页用键盘

运行代码框
<body onkeydown="alert('禁用');return false;"> 限制键盘的某个键：body onkeydown="if(event.keyCode==num){alert('禁用');return false;}
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

再加个找按键的值

运行代码框
<script> function show(){ alert("ASCII代码是："+event.keyCode); } </script> <body onkeydown="show()">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

只能是IP地址

运行代码框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <style> .a3{width:30;border:0;text-align:center} </style> <script> function mask(obj){ obj.value="/obj.value.replace(/[^\d]/g,'') 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("ip"+nextip+".focus()") } if(obj.value.length>=3) if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0) { alert(parseInt(obj.value)+"IP地址错误！") obj.value="" 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("ip"+nextip+".focus()") } } function mask_c(obj) { clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'')) } </script> <title>IP地址输入</title> </head> <body>IP地址输入 <div style="border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt"> <input type=text name=ip1 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. <input type=text name=ip2 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. <input type=text name=ip3 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. <input type=text name=ip4 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

用#default#savehistory防止后退清空text文本框：

运行代码框
<HTML> <HEAD> <META NAME="save" CONTENT="history"> <STYLE> .saveHistory {behavior:url(#default#savehistory);} </STYLE> </HEAD> <BODY> <INPUT class=saveHistory type=text id=oPersistInput> <input type=button onclick='javascript:location.href=""' value='点击进入,再按后退键试试？'> </BODY> </HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

TEXTAREA自适应文字行数的多少

运行代码框
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上传预览图片

运行代码框
<img id=pic src=/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="file.outerHTML=file.outerHTML.replace(/value=\w/g,'')" value="清除file里字">
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

去掉下拉选项的边框

运行代码框
<div style="position: absolute; left: 10px; top: 10px; width: 115px; height: 20px; clip:rect(2 114 20 2);"> <select> <option >cnpeople</option> <option >cnrose</option> <option >cnbruce</option> </select> </font> </div>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下拉列表打开窗口

运行代码框
<select onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;"> <option selected>更多链接……</option> <option value="">cnbruce</option> <option value="">daonet</option> <option value="">blue!dea </select>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

通过下拉菜单传递跳转

运行代码框
<form action="showlog.asp?" > <select name="cat_id" onpropertychange="form.submit();"> <option value="">==请选择==</option> <option value="11">11</option> <option value="22">22</option> </select> </form>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

TAB键在文本域中的体现

运行代码框
<script> function editTab() { var code, sel, tmp, r var tabs="" event.returnValue = false sel =event.srcElement.document.selection.createRange() r = event.srcElement.createTextRange() 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("startToStart", tmp) sel.text = sel.text.replace(/^\t/gm, "") code = code.replace(/^\t/gm, "").replace(/\r\n/g, "\r") r.findText(code) r.select() 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("startToStart", tmp) sel.text = "\t"+sel.text.replace(/\r\n/g, "\r\t") code = code.replace(/\r\n/g, "\r\t") r.findText(code) r.select() } else { sel.text = "\t" sel.select() } break case (13) : tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) tmp.setEndPoint("endToEnd", sel) for (var i=0; tmp.text.match(/^[\t]+/g) && i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += "\t" sel.text = "\r\n"+tabs sel.select() break default : event.returnValue = true break } } </script> <textarea cols=75 rows=20 onkeydown="editTab()"> <script> alert("ok") </script>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文本框的上/下拉

运行代码框
<form name="cnbruce"> <textarea name="com"> 向下向上
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个复选框，点击之后一组复选框全部都选上

运行代码框
<input type="checkbox" name="checkA" onpropertychange="for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked}">a <br> <span id="A"> <input type="checkbox" name="A1"> <input type="checkbox" name="A2"> <input type="checkbox" name="A3"> </span>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Debug Textarea：在线写 js 脚本的时候，用来即时查错的东西！

运行代码框
<HTML> <HEAD> <TITLE>Debug Textarea</TITLE> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> </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="javascript"> // Coded by windy_sk <windy_sk@126.com> 20040205 function reportError(msg,url,line) { var str = "You have found an error as below: \n\n"; str += "Err: " + msg + " on line: " + 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('Please input the line number', '1')); break; case 65: //a document.execCommand("SelectAll"); break; case 67: //c document.execCommand("Copy"); break; case 88: //x document.execCommand("Cut"); break; case 86: //v document.execCommand("Paste"); break; case 90: //z document.execCommand("Undo"); break; case 89: //y document.execCommand("Redo"); break; default: break; } event.keyCode = 0; event.returnValue = false; } return; } function show_ln(){ var txt_ln = document.getElementById('txt_ln'); var txt_main = document.getElementById('txt_main'); txt_ln.scrollTop = txt_main.scrollTop; while(txt_ln.scrollTop != txt_main.scrollTop) { txt_ln.value += (i++) + '\n'; txt_ln.scrollTop = txt_main.scrollTop; } return; } function editTab(){ var code, sel, tmp, r var tabs='' event.returnValue = false sel =event.srcElement.document.selection.createRange() r = event.srcElement.createTextRange() 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('startToStart', tmp) sel.text = sel.text.replace(/^\t/gm, '') code = code.replace(/^\t/gm, '').replace(/\r\n/g, '\r') r.findText(code) r.select() 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('startToStart', tmp) sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t') code = code.replace(/\r\n/g, '\r\t') r.findText(code) r.select() }else{ sel.text = '\t' sel.select() } break case (13) : tmp = sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) // 出错检验代码~~~~~~ if(sel.parentElement() != tmp.parentElement()) return; tmp.setEndPoint('endToEnd', sel) for (var i=0; tmp.text.match(/^[\t]+/g) && i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += '\t' sel.text = '\r\n'+tabs sel.select() break default : event.returnValue = true break; } return; } function runcode() { var str = document.getElementById("txt_main").value; var code_win = window.open('about:blank'); code_win.document.open(); code_win.document.writeln("<script>"); code_win.document.writeln("function reportError(msg,url,line){\nline-=14;\nvar str='You have found an error as below: \\n\\n';\nstr+='Err: '+msg+' on line: '+(line);\nalert(str);\nopener.goto(line);\nopener.focus();\nwindow.onerror=null;\nsetTimeout('self.close()',10);\nreturn true;\n}"); code_win.document.writeln("window.onerror = reportError;"); code_win.document.writeln("<\/script>"); code_win.document.writeln(str); code_win.document.close(); return; } function savecode() { var str = document.getElementById("txt_main").value; var code_win = window.open('about:blank','_blank','top=10000'); code_win.document.open(); code_win.document.writeln(str); code_win.document.close(); code_win.document.execCommand('saveas','','code.html'); code_win.close(); return; } function goto(ln) { if(!/^\d+$/.test(ln)) return; var obj = document.getElementById("txt_main"); var rng = obj.createTextRange(); var arr = obj.value.replace(/\r/, "").split(/\n/); if(ln>arr.length) ln = arr.length; var str_tmp = ""; for(var i=0; i<ln-1; i++) { str_tmp += arr[i]; } rng.moveStart('character',str_tmp.length+1); str_tmp = ""; for(i=ln; i<arr.length; i++) { str_tmp += arr[i]; } rng.moveEnd('character',-str_tmp.length); rng.select(); return; } window.onload = function() {document.getElementById("txt_main").value = "<script>\nalert(')\n<\/script>";} </script> <BODY> <table width='600' class='list' border='1' bgcolor='#eeeeee' bordercolorlight='#000000' bordercolordark='#FFFFFF' cellpadding='0' cellspacing='0'> <tr bgcolor='#cccccc'> <td colspan='2' height='20' align='center'><b>Debug Textarea</b></td> </tr> <tr> <td colspan='2'> <table width='95%' border='0' align='center' > <tr> <td align='center'><br /> <textarea id='txt_ln' name='content' rows='10' style='width:40px;overflow:hidden;height:200px;border-right:0px;text-align:right;line-height:14px' onselectstart='this.nextSibling.focus();return false' readonly>

阅读(402) | 评论(0) | 转发(0) |

上一篇：透過 jQuery FCKeditor Plugin 來使用 FCKEditor

下一篇：根据IE载入css

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6