本文介绍如何利用JavaScript的onkeypress事件和event.keyCode属性,在HTML表单中限制用户输入的字符类型。通过判断ASCII码范围,分别实现禁止特殊符号、禁止引号、仅允许数字以及仅允许大写字母的功能,适用于需要严格格式控制的输入场景。
HTML表单结构定义
HTML页面结构如下所示:
具体代码实现如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS控制非法字符的输入</title>
</head>
<body>
<form>
<p>该区域禁止输入以下特殊字符(如!@#$%^&*等):<br>
<textarea rows="2" cols="20" name="comments" onkeypress="checkComments()"></textarea>
</p>
<p>该区域禁止输入引号:<br>
<input type="text" name="txtEmail" onkeypress="checkEmail()"/>
</p>
<p>该区域仅允许输入数字:<br>
<input type="text" name="txtPostalCode" onkeypress="checkPostalCode()"/>
</p>
<p>该区域仅允许输入大写英文字母:<br>
<input type="text" name="txtEnglish" onkeypress="checkEnglish()"/>
</p>
</form>
</body>
</html> JavaScript输入验证逻辑
对应的JavaScript脚本代码如下:
具体代码实现如下:
<script type="text/javascript" language="JavaScript">
/*
/* 特殊字符在ASCII码中的表示范围通常为32~48,57~65,90~97 */
/* 通过设置 event.returnValue=false,可阻止键盘输入内容写入文本框 */
*/
function checkComments(){
if (( event.keyCode > 32 && event.keyCode < 48) ||
( event.keyCode > 57 && event.keyCode < 65) ||
( event.keyCode > 90 && event.keyCode < 97)
) {
event.returnValue = false;
}
}
/*
/* 双引号和单引号的ASCII码分别为34和39 */
*/
function checkEmail(){
if ( event.keyCode == 34 || event.keyCode == 39 ) {
event.returnValue = false;
}
}
/*
/* 数字字符的ASCII码范围通常为48~57,此处代码逻辑可能存在笔误,原文写作45~57 */
*/
function checkPostalCode() {
if( event.keyCode < 45 || event.keyCode >57 ) {
event.returnValue = false;
}
}
/*
/* 大写英文字母的ASCII码范围通常为65~90,原文注释写作65~91 */
/* 小写英文字母的ASCII码范围通常为97~122,原文注释写作97~123 */
*/
function checkEnglish() {
if( event.keyCode < 65 || event.keyCode > 91 ) {
event.returnValue = false;
}
}
</script>