首先看一下效果
接下来代码展示
<%@ 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" οnkeypress="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" οnclick="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" οnkeypress="check()"/>
第二种方法就是当超过限定字数就禁止输入但是不会有对话框提示
<input id="t1" type="text" name="name" class="bg" maxlength="5" οnkeypress="check()"/>
相对于上面那种方法这种就显得更加的简单