使用javaScript对jsp中输入框进行字符输入的限制

首先看一下效果

接下来代码展示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath}/admin/css/Style.css" type="text/css" rel="stylesheet">

<title>添加用户信息</title>
<script type="text/javascript">
function check(){
	var d=document.getElementById('t1').value;
		if(d.length==5){
		alert("最大只可以输入五个字符");
		}
}
</script>
</head>
<body>
<p style="color: red;" align="center">${msg }</p>
<form id="userAction_save_do" name="Form1" action="${pageContext.request.contextPath}/addUserServlet" method="post">
		 
		<table cellSpacing="1" cellPadding="5" width="100%" align="center"
			bgColor="#eeeeee" style="border: 1px solid #8ba7e3" border="0">
			<tr>
				<td class="ta_01" align="center" bgColor="#afd1f3" colSpan="4"
					height="26"><strong>添加用户信息</strong>
				</td>
			</tr>
			<tr>
				<td align="center" bgColor="#f5fafe" class="ta_01">用户名：</td>
				<td class="ta_01" bgColor="#ffffff" colSpan="3">
					<input id="t1" type="text" name="name" class="bg"   onkeypress="check()"/>
				</td>
			</tr>
			<tr>
				<td class="ta_01" align="center" bgColor="#f5fafe">密码：</td>
				<td class="ta_01" bgColor="#ffffff" colSpan="3">
					<input type="password" name="password" class="bg" />
				
				</td>
			</tr>
			<tr>
				<td class="ta_01" align="center" bgColor="#f5fafe">邮件：</td>
				<td class="ta_01" bgColor="#ffffff" colSpan="3">
					<input type="text" name="email" class="bg" />
				
				</td>
			</tr>
			<tr>
				<td align="center" colSpan="4" class="sep1">
					<img src="${pageContext.request.contextPath}/admin/images/shim.gif">
				</td>
			</tr>

			<tr>
				<td class="ta_01" style="WIDTH: 100%" align="center" bgColor="#f5fafe" colSpan="3">
					<input type="submit" class="button_ok" value="确定" />	
					<font face="宋体">       </font>
					<input type="reset" value="重置" class="button_cancel">
					<font face="宋体">       </font> 
					<input class="button_ok" type="button" onclick="history.go(-1)" value="返回" />
					<span id="Label1"></span>
				</td>
			</tr>
		</table>
	</form>

</body>
</html>

实现该功能的主要代码如下

<script type="text/javascript">
function check(){
	var d=document.getElementById('t1').value;//首先通过文本框的id获取它的值然后进行判断
		if(d.length==5){//如果输入的字符大于5就给个对话框
		alert("最大只可以输入五个字符");
		}
}
</script>

然后在输入框添加一个监听器

<input id="t1" type="text" name="name" class="bg"   onkeypress="check()"/>

第二种方法就是当超过限定字数就禁止输入但是不会有对话框提示

<input id="t1" type="text" name="name" class="bg" maxlength="5"  onkeypress="check()"/>

相对于上面那种方法这种就显得更加的简单

使用javaScript对jsp中输入框进行字符输入的限制

猜你喜欢