js键值查询、验证

最新推荐文章于 2025-12-02 14:48:32 发布

最新推荐文章于 2025-12-02 14:48:32 发布 · 508 阅读

文章标签：

#javascript #xhtml #ui #ViewUI

本文详细介绍了如何通过JavaScript禁用特定键盘按键、实现输入验证，包括数字、IP地址等特定格式的输入限制，并展示了如何使用JavaScript进行即时字符计数、复选框全选操作等实用技巧。

1.一般的按键禁用

一般的按键禁用只要找出相应的keycode禁用即可。例如：window.event.keyCode==13 //Enter键

其他可以对照一下的keyCode进行选择。

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	/\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

2.组合键的禁用

和一般的按键禁用差不多，只需要将两个按键连在一起就可以了。

例：(window.event.shiftKey) && (window.event.keyCode == 121)

哦，这里注意，shiftKey,altKey和ctrlKey是有专门的判断的，不用调出keyCode直接使用就可以了。

3.键和对象的禁用。

可以指定某些类型的对象禁用这个键。

例：window.event.keyCode==13 && window.event.srcElement.type = 'image' //在选中图像的情况下按回车。

4.其他事件的禁用。

F1的禁用：window.onhelp(){return false;}

5.ENTER键可以让光标移到下一个输入框： < inputonkeydown = " if(event.keyCode==13)event.keyCode=9 " >

6.只能是中文：

< inputonkeyup = " value=value.replace(/[-~]/g,'') " onkeydown = " if(event.keyCode==13)event.keyCode=9 " >

7.只能是英文和数字.屏蔽了输入法：

< inputstyle = " ime-mode:disabled " onkeydown = " if(event.keyCode==13)event.keyCode=9 " >

8.只能输入英文和数字：

< inputonkeyup = " value=value.replace(/[W]/g,'') " onbeforepaste = " clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,'')) " onkeydown = " if(event.keyCode==13)event.keyCode=9 " >

9.只能是数字： < inputonkeyup = " value=value.replace(/[^d]/g,'') " onbeforepaste = " clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,'')) " >

10.只能显示，不能修改的文本框： < inputreadOnlyvalue = " 只能显示，不能修改 " >

oncontextmenu="return false"；oncontextmenu = " window.event.returnvalue=false " 右键禁用

eg:< table border oncontextmenu = return ( false ) >< td > no </ table > 可用于Tabl

oncontextmenu=self.event.returnValue=false 右键禁用
onselectstart="return false" 左键禁用
onkeydown="return false;" 禁用键盘
onpaste="return false;" 禁用粘贴
oncopy = " return false; " oncut = " return false; " 防止复制

< link rel = " Shortcut Icon " href = " favicon.ico " > IE地址栏前换成自己的图标

< link rel = " Bookmark " href = " favicon.ico " > 可以在收藏夹中显示出你的图标

< input style = " ime-mode:disabled " > 关闭输入法

11.只能是数字,判断按键代码如下:

< scriptlanguage = javascript >
function onlyNum(){

if ( ! ((event.keyCode >= 48 && event.keyCode <= 57 ) || (event.keyCode >= 96 && event.keyCode <= 105 ) || (event.keyCode == 8 )))
event.returnValue = false ;
}
</ script >
< inputonkeydown = " onlyNum(); " >

12.限制键盘的某个键： < bodyonkeydown = " if(event.keyCode==num){alert('禁用');returnfalse;}>

13.找按键的值：

functionshow(){
alert( " ASCII代码是： " +event.keyCode);
}
</script>
<bodyonkeydown= " show() " >

14.　只能是IP地址
　只能是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 " > <mce:style></mce:style><style mce_bogus="1"> .a3{width:30;border:0;text-align:center} </style> <mce:script type="text/javascript"></mce: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>

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="practise._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <input type="checkbox" name=" checkA " onpropertychange=" for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked} "> <br /> <span id="A"> <input type="checkbox" name=" A1 " /> <input type="checkbox" name=" A2 " /> <input type="checkbox" name=" A3 " /> </span> </div> </form> </body> </html>

16.取下拉框中的文本值

17.select里的option进行分类列表

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="practise._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <span style="position: absolute; border: 1px inset #d3d6d9" mce_style="position: absolute; border: 1px inset #d3d6d9"> <select style="margin: -2px; width: 200px"> <option selected="selected">------------ 请选择 ------------</option> <optgroup label=" JavaScript&VBScript区 "> <option>原创</option> <option>经典</option> </optgroup> <optgroup label="后台区 "> <option>asp & sql</option> <option>php & mysql</option> </optgroup> </select> </span> </div> </form> </body> </html>

18.动态添加、删除两边的数据

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <mce:script type="text/javascript" language="javascript"></mce:script> <body> <form name="myForm" method="post"> <select name="dept_company" size="10" multiple="multiple" id="dept_company"> <option value="">Please Select... </option> <option value="a">AA</option> <option value="b">BB</option> <option value="c">CC</option> </select> <input name="dept_company_list" type="hidden" /> <input name="button" type="button" onclick="addItem('dept_company','dept_company2')" value="添加-->>" /> <input name="button" type="button" onclick="deleteItem('dept_company2','dept_company')" value="<<--删除" /> <select name="dept_company2" size="10" multiple="multiple" id="dept_company2"> </select> </form> </body> </html>

19.即时提示限制输入的字符数

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <mce:script language="javascript" type="text/javascript"></mce:script> <body> <form method=" post " name="test" onsubmit=" return checkdata() " action=""> <textarea onkeydown=" return changebyte1(document.test.icqcontent.value,198)" onkeyup=" return changebyte1(document.test.icqcontent.value,198) " name="icqcontent" cols="40" rows=" 3 ">

20.光标总是停留在最后

21. 简单的验证总结

js文件 //测试输入框的值是否整数 function checkNum(inputObj) { var regex = /^/d*$/; return regex.test(inputObj.value); } //测试输入框的值的个数 function checkLength(inputObj, maxLength) { return inputObj.value.length <= maxLength; } //将字符串的首尾空格全部去掉 String.prototype.Trim = function() { return this.replace(/(^/s*)|(/s*$)/g, ""); } //测试输入框是否空值.value function checkInputValueIsEmpty(inputObj) { var s = inputObj.value.Trim(); if (s == null || s == "") { return false; } else { return true; } } //判断一个控件的值是否为空 function checkValueIsEmpty(inputValue) { var strValue = inputValue.Trim(); if (strValue == null || strValue == "") { return true; } else { return false; } } //验证最大长度指定的正小数,inputObj为input对象，beforeLength为小数点前面的位数个数，afterLength为小数点后面的位数个数 function checkNumberLength(inputObj, beforeLength, afterLength) { if (inputObj.value.indexOf(".") >= 0) { var regex = new RegExp("^//d{0," + beforeLength + "}[.]?//d{0," + afterLength + "}$"); return regex.test(inputObj.value); } else { var regex = new RegExp("^//d{0," + beforeLength + "}$"); return regex.test(inputObj.value); } } //验证最大长度指定的正负小数,inputObj为input对象，beforeLength为小数点前面的位数个数，afterLength为小数点后面的位数个数 function checkAllNumberLength(inputObj, beforeLength, afterLength) { if (inputObj.value.indexOf(".") >= 0) { var regex = new RegExp("^-?//d{0," + beforeLength + "}[.]?//d{0," + afterLength + "}$"); return regex.test(inputObj.value); } else { var regex = new RegExp("^-?//d{0," + beforeLength + "}$"); return regex.test(inputObj.value); } } //验证最大长度指定的正负小数value function checkAllNumberLengthByValue(inputValue, beforeLength, afterLength) { if (inputValue.indexOf(".") >= 0) { var regex = new RegExp("^-?//d{0," + beforeLength + "}[.]?//d{0," + afterLength + "}$"); return regex.test(inputValue); } else { var regex = new RegExp("^-?//d{0," + beforeLength + "}$"); return regex.test(inputValue); } } //测试输入框的值是否带小数 function checkNumber(inputObj) { var regex = /^([0-9]*)([.]?)([0-9]*)$/; return regex.test(inputObj.value); } //测试输入框的值是否小数 function checkAllNumber(inputObj) { var regex = /^-?([0-9]*)([.]?)([0-9]*)$/; return regex.test(inputObj.value); } //测试身份证验证 function checkIDnumber(inputObj) { var regex = /(^/d{15}$)|(^/d{17}([0-9]|X)$)/; return regex.test(inputObj.value); } //测试身份证验证 function checkemail(inputObj) { var regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; return regex.test(inputObj.value); } function KeyPress(inputObj) {//只允许录入数据字符 0-9 和小数点 var txtval = inputObj.value; var key = event.keyCode; if ((key < 48 || key > 57) && key != 46) { event.returnValue = false; } else if (key == 46) { if (txtval.indexOf(".") != -1 || txtval.length == 0) event.returnValue = false; } } function KeyPressAllNumber(inputObj) {//只允许录入所有小数 var txtval = inputObj.value; var key = event.keyCode; if ((key < 48 || key > 57) && key != 46 && key != 45) { event.returnValue = false; } else if (key == 46) { if (txtval.indexOf(".") != -1 || txtval.length == 0) event.returnValue = false; } else if (key == 45) { if (txtval.indexOf("-") != -1) event.returnValue = false; } } //输入整数 function KeyPressNum(objTR) {//只允许录入数据字符 0-9 //var objTR = element.document.activeElement; var txtval = objTR.value; var key = event.keyCode; if (key < 48 || key > 57) { event.keyCode = 0; } } function checkInputValueIsEmptyOrOverLength(inputObj, inputLength, inputField) { if (!checkInputValueIsEmpty(inputObj)) { alert(inputField + "不能为空！"); return false; } if (!checkLength(inputObj, inputLength)) { alert(inputField + "输入值超出最大长度！"); return false; } return true; } //将inputObj的文本全角转半角 function DBC2SBC(inputObj) { var result = ""; for (var i = 0; i < inputObj.value.length; i++) { code = inputObj.value.charCodeAt(i); //获取当前字符的unicode编码 if (code >= 65281 && code <= 65373)//在这个unicode编码范围中的是所有的英文字母已及各种字符 { result += String.fromCharCode(inputObj.value.charCodeAt(i) - 65248); //把全角字符的unicode编码转换为对应半角字符的unicode码 } else if (code == 12288)//空格 { result += String.fromCharCode(inputObj.value.charCodeAt(i) - 12288 + 32); } else { result += inputObj.value.charAt(i); } } inputObj.value = result; } //判断输入的中英文 function checkByteLength(inputObj) { var byteLen = 0, len = inputObj.value.length; if (inputObj.value) { for (var i = 0; i < len; i++) { if (inputObj.value.charCodeAt(i) > 255) {//一字节有8位2进制数，从0开始，2的8次方就是255；如果大于255,就表示占用了2个字节 byteLen += 2; } else { byteLen++; } } return byteLen; } else { return 0; } } 页面： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="selectData.aspx.cs" Inherits="YC.SH.WEB.selectData" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script src="js/validate.js" mce_src="js/validate.js" type="text/javascript"></mce:script><%--引用js验证方法--%> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .input01 { height: 18px; width: 170px; background-color: #fff; border: 1px solid #a6b9bf; } .input02 { height: 18px; width: 170px; background-color: #FFEEC2; border: 1px solid #4B4B6F; } .btn02 { width: 60px; height: 24px; border: 1px solid #87a3c1; background: url(../images/ContentPage/submitbg.gif); color: #555; font-size: 12px; line-height: 180%; cursor: pointer; } .btn04 { width: 60px; height: 24px; border: 1px solid #a2904d; background: url(../images/ContentPage/submitbg.gif) 0 -66px; color: #630; font-size: 12px; cursor: pointer; line-height: 180%; } </style> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <asp:HiddenField ID="hf_id" runat="server" /> <table> <tr> <td> 名字： </td> <td> <asp:TextBox ID="txt_name" runat="server" MaxLength="20" CssClass="input01" onfocus="this.className='input02';this.select();" onblur="this.className='input01';DBC2SBC(this);" /> </td> <td> <span style="color: Red" mce_style="color: Red">*</span> 数据库：varchar(20) </td> </tr> <tr> <td> 座机号码： </td> <td> <table> <tr> <td> <asp:TextBox ID="txt_areaNumber" runat="server" MaxLength="4" CssClass="input01" onfocus="this.className='input02';this.select();" onblur="this.className='input01';DBC2SBC(this);" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPressNum(this);" Width="50px" /> </td> <td> - </td> <td> <asp:TextBox ID="txt_fixNumber" runat="server" MaxLength="8" CssClass="input01" onfocus="this.className='input02';this.select();" onblur="this.className='input01';DBC2SBC(this);" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPressNum(this);" Width="103px" /> </td> </tr> </table> </td> <td> 数据库：varchar(20) </td> </tr> <tr> <td> 手机号码： </td> <td> <asp:TextBox ID="txt_telephone" runat="server" MaxLength="11" CssClass="input01" onfocus="this.className='input02';this.select();" onblur="this.className='input01';DBC2SBC(this);" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPressNum(this);" /> </td> <td> <span style="color: Red" mce_style="color: Red">*</span> 数据库：varchar(11) </td> </tr> <tr> <td> 价格： </td> <td> <asp:TextBox ID="txt_price" runat="server" CssClass="input01" onfocus="this.className='input02';this.select();" onblur="this.className='input01';DBC2SBC(this);" MaxLength="7" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPress(this,4,2);" /> </td> <td> <span style="color: Red" mce_style="color: Red">*</span> 数据库：varchar(6,2) </td> </tr> <tr> <td> 温度探头1高温： </td> <td> <asp:TextBox ID="txt_temperatureOneHeight" runat="server" CssClass="input01" onfocus="this.className='input02';" onblur="this.className='input01';DBC2SBC(this);" MaxLength="9" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPressAllNumber(this);" /> </td> <td> （℃） </td> <td> <span style="color: Red" mce_style="color: Red">*</span> 数据库：varchar(7,2) </td> </tr> <tr> <td> 温度探头1低温： </td> <td> <asp:TextBox ID="txt_temperatureOneLow" runat="server" CssClass="input01" onfocus="this.className='input02';" onblur="this.className='input01';DBC2SBC(this);" MaxLength="9" Style="ime-mode: disabled" mce_Style="ime-mode: disabled" onkeypress="KeyPressAllNumber(this);" /> </td> <td> （℃） </td> <td> <span style="color: Red" mce_style="color: Red">*</span> 数据库：varchar(7,2) </td> </tr> <tr> <td> <input type="button" id="DialogButton" onclick='validata();' value=" 确定 " class="btn02" onmouseover="this.className='btn04'" onmouseout="this.className='btn02'" /> </td> </tr> </table> </form> </body> </html> 后台： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using YC.SH.DataAccess.PictureCompare;//插入的类 namespace YC.SH.WEB { public partial class selectData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { /*前面页面传id过来 1. 后台代码传值： Session["id"] = "id"; 2. 前台html传值（本窗口跳转，窗口不在）： window.location.href = "selectData.aspx?id=" + encodeURI(id); 3. 前台html传值（打开另外一个窗口，本窗口在）： window.open("selectData.aspx?id=" + encodeURI(id) + "&carNumber=" + carNumber); 【两个参数用‘&’隔开，取得时候分开取，不需要分隔符】 */ hf_id.Value = Server.UrlDecode(Request.QueryString["id"]); if (!string.IsNullOrEmpty(hf_id.Value)) { //修改：先赋值 loadEdit(); } } /// <summary> /// 添加 /// </summary> /// <returns></returns> private int insert() { int result = 0; Object obj = new Object(); if (string.IsNullOrEmpty(txt_areaNumber.Text.Trim())) { obj = txt_fixNumber.Text.Trim(); } else { obj = txt_areaNumber.Text.Trim() + "-" + txt_fixNumber.Text.Trim(); } //result=添加方法 return result; } /// <summary> /// 修改前赋值 /// </summary> private void loadEdit() { //Object obj = null; //int count = 1;//根据id进行查找，如果count>0,有值 //if (count > 0) //{ // if (!string.IsNullOrEmpty(obj.固定电话)) // { // string[] phones = obj.固定电话.Split('-'); // if (phones != null) // { // if (phones.Length > 1) // { // txt_areaNumber.Text = phones[0]; // txt_fixNumber.Text = phones[1]; // } // else // { // txt_fixNumber.Text = phones[0]; // } // } // } // else // { // txt_areaNumber.Text = string.Empty; // txt_fixNumber.Text = string.Empty; // } //} } /// <summary> /// 修改 /// </summary> /// <returns></returns> private int edit() { int result = 0; Object obj = null;//根据hf_id.value来查找对象 if (obj != null) { //id要赋值，负责弹出修改成功，但是数据库中的值没有变 obj = hf_id.Value; //result=修改的方法 } return result; } } }