js控制表单输入域的长度

问题描述：

笔者记得有一次，用户提出这样一个需求：要求表单中“备注”字段的字数不超过500字，用户输入超过500字给出用户提示，并且自动截断超过的文字。那么我们使用js函数应该如何实现呢！

解决方法：

实际上，我们可以通过写一个js函数，当输入输入完成后对用户的输入进行检测，给出适当的处理。通过查看js的api，我们知道onkeyup事件正好适合这种情况，因此就可以让该事件调用我们的字符处理函数。函数代码如下：

function checkWord(len, evt) {
if (evt == null)
evt = window.event;
var src = evt.srcElement ? evt.srcElement : evt.target;
var str = src.value.trim();
if (str.length > len) {
alert("【备注】不能超过500字");
src.value = str.substring(0, len);
}
}

函数注解：

1.该函数，第一个参数为要控制的域长度，第二个参数代表event, 即事件的状态，例如：触发事件的元素、事件触发时鼠标的位置及状态、按下的按键等。

2. 考虑到浏览器的兼容性，我们首先判断evt是否为null。因为，在IE浏览器中，event为全局变量，随时可用，而在firefox中为临时变量，需要参数引导才能够生效。因此，在IE中使用window.event, 而firefox中使用event。

3.之所以使用关系表达式获取事件对象，是因为：在firefox中事件对象为：window.target，而在IE/Opera中事件对象为：window.event.srcElement，然而在Opera中两者均可使用。因此大家在使用时，一定要看好自己的浏览器兼容那个版本。

函数调用方法：

我们以.net中TextBox控件为例说明，如下：

     <asp:TextBox ID="txtRemark" runat="server" MaxLength="500" onKeyUp="javascript:checkWord(500,event);"  TextMode="MultiLine" Rows="3" Width="98%"></asp:TextBox>

扩展：

上述函数可以实现一个特定字段的验证，如果我们一个表单有好几个字段对输入域的长度有限制，我们该怎么做呢？当然，你可以复制几遍，然后更改以下超过长度的提示，除了这种方法，还有没有更好的途径呢。其实，你可以在函数中添加一个参数，用来表示元素的ID，然后根据不同的ID给出不同的提示即可。以我曾经的一个项目为例，改进后的函数如下：

function checkWord(len, evt, id) {
if (evt == null)
evt = window.event;
var src = evt.srcElement ? evt.srcElement : evt.target;
var str = src.value.trim();
if (str.length > len) {
if (id == "txtMSystemContent") {
alert("【合同主要内容->主体系统->合同内容】不能超过500字");
}
else if (id == "txtSSystemContent") {
alert("【合同主要内容->配合系统->合同内容】不能超过500字");
}
else if (id == "txtProgressDetail") {
alert("【软件开发进度评估及简要说明(运营单位)->明细说明】不能超过500字");
}

src.value = str.substring(0, len);
}
}

改进后函数调用的方式：

<asp:TextBox ID="txtMSystemContent" MaxLength="500" TextMode="MultiLine" Rows="2" runat="server" Width="98%" onKeyUp="javascript:checkWord(500,event,'txtMSystemContent')"></asp:TextBox>

至此，如果你要在添加一个字段的话，只需要添加eles if分支即可。