如何使用JavaScript在HTML中对textArea施加最大长度
如何使用JavaScript在HTML中对textArea施加最大长度
提问于 2009-07-14 13:44:20
我希望有一些功能，如果我写
<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>它会自动将最大长度施加到textArea上。如果可能，请不要在jQuery中提供解决方案。
注意:如果我这样做，可以做到这一点：
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">
function imposeMaxLength(Event, Object, MaxLen)
{
return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}从复制
但重点是，我不想每次声明textArea时都编写onKeyPress和onKeyUp。
回答 12
Stack Overflow用户
回答已采纳
发布于 2009-07-14 13:48:39
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA');
for(var i = 0, l = txts.length; i < l; i++) {
if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
var func = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if(this.value.length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
};
}Stack Overflow用户
发布于 2011-05-09 20:01:30
我知道你想避免jQuery，但是由于解决方案需要JavaScript，所以这个解决方案(使用jQuery 1.4)是最谨慎和健壮的。
灵感来自于Dana Woodman的回答，但这是对Dana Woodman答案的改进：
这个答案的变化是:更简单，更通用，使用jQuery.live，如果长度合适，也不设置val (导致在IE中使用箭头键，在IE中有明显的加速)：
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});编辑：jQuery 1.7+的更新版本，使用on而不是live
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});Stack Overflow用户
发布于 2011-08-11 02:21:02
HTML5将maxlength属性添加到textarea元素，如下所示：
<!DOCTYPE html>
<html>
<body>
<form action="processForm.php" action="post">
<label for="story">Tell me your story:</label><br>
<textarea id="story" maxlength="100"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>目前在Chrome 13、FF 5和Safari 5中支持此功能。毫不奇怪，IE 9不支持此功能。(在Win 7上测试)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1125482
复制相关文章
相似问题
腾讯云开发者
