如何使用JavaScript将最大长度强加于HTML中的textArea

Question

如何使用JavaScript将最大长度强加于HTML中的textArea

我希望有一些功能，如果我写

<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))
}

抄袭在HTML文本区域中模拟HTML输入“maxength”属性的最佳方法是什么？

但关键是，我不想每次声明textArea时都写onKeyPress和onKeyUp。

Answer 1

window.onload&nbsp;=&nbsp;function()&nbsp;{&nbsp; &nbsp;&nbsp;var&nbsp;txts&nbsp;=&nbsp;document.getElementsByTagName('TEXTAREA');&nbsp; &nbsp;&nbsp;for(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;l&nbsp;=&nbsp;txts.length;&nbsp;i&nbsp;<&nbsp;l;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength")))&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;func&nbsp;=&nbsp;function()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;len&nbsp;=&nbsp;parseInt(this.getAttribute("maxlength"),&nbsp;10);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(this.value.length&nbsp;>&nbsp;len)&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Maximum&nbsp;length&nbsp;exceeded:&nbsp;'&nbsp;+&nbsp;len);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.value&nbsp;=&nbsp;this.value.substr(0,&nbsp;len);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;txts[i].onkeyup&nbsp;=&nbsp;func; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;txts[i].onblur&nbsp;=&nbsp;func; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;};}

Answer 2

更新使用埃里克的解决方案.live()相反，它更健壮一些。尽管您想要一个不使用jQuery的解决方案，但我想我应该为通过Google查找此页面并寻找jQuery-esque解决方案的任何人添加一个解决方案：$(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;all&nbsp;textareas&nbsp;that&nbsp;have&nbsp;a&nbsp;"maxlength"&nbsp;property. &nbsp;&nbsp;&nbsp;&nbsp;$('textarea[maxlength]').each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Store&nbsp;the&nbsp;jQuery&nbsp;object&nbsp;to&nbsp;be&nbsp;more&nbsp;efficient... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$textarea&nbsp;=&nbsp;$(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Store&nbsp;the&nbsp;maxlength&nbsp;and&nbsp;value&nbsp;of&nbsp;the&nbsp;field. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;maxlength&nbsp;=&nbsp;$textarea.attr('maxlength'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;$textarea.val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Trim&nbsp;the&nbsp;field&nbsp;if&nbsp;it&nbsp;has&nbsp;content&nbsp;over&nbsp;the&nbsp;maxlength. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$textarea.val(val.slice(0,&nbsp;maxlength)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Bind&nbsp;the&nbsp;trimming&nbsp;behavior&nbsp;to&nbsp;the&nbsp;"keyup"&nbsp;event. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$textarea.bind('keyup',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$textarea.val($textarea.val().slice(0,&nbsp;maxlength)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;});});希望这对你们这些谷歌人有用.。