JavaScript 限制表单输入字符类型的实现方法

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>