首先看一下效果
接下来代码展示
<%@ 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()"/>
相对于上面那种方法这种就显得更加的简单