如何使用 JavaScript 在 HTML 中的 textArea 上施加 maxlength

IT技术 javascript html textarea
2021-01-27 23:58:55

我想要一些功能，如果我写

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

它会自动将 maxlength 强加于 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 输入“maxlength”属性的最佳方法是什么？

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

6个回答
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;
    } 
  };

}
@JoshStodola - 事实上你不能。如果我将一整块内容粘贴到 textarea 中，单击提交，并且只看到其中的一小部分没有任何响应，那么作为用户，我真的会很恼火。
2021-03-24 23:58:55
@JoshStodola -onblur在用户点击 textarea 之前不会处理粘贴。onkeyup如果通过上下文菜单或浏览器菜单完成粘贴，则不会处理粘贴。如果您不需要筛选粘贴，则此方法有效。有关基于计时器的方法，请参阅此答案stackoverflow.com/a/10390626/1026459
2021-03-27 23:58:55
我切换了警报的顺序和值 truncate - 在原始顺序中，onkeyup 会发出警报，导致控件失去焦点并且 onblur 触发，因为该字段尚未被截断。
2021-03-28 23:58:55
我想我记得交易是什么：当 Javascript 检查“value”属性时，FF 或 IE（我认为它是 FF）返回的字符串与表单发布时发送回服务器的字符串不同！它与硬换行符如何/不插入回车符有关。使用客户端和服务器端的一些调试代码很容易弄清楚。
2021-03-30 23:58:55
Josh 看起来它会起作用，但你能解释一下这个东西会做什么吗 --- if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { -- ——
2021-04-08 23:58:55

我知道您想避免使用 jQuery，但由于该解决方案需要 JavaScript，因此该解决方案（使用 jQuery 1.4）是最简洁和健壮的。

受 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));
    }
});
是的，在 () 上使用了它，它就像一个宝石。谢谢。这是一个稍微修改和调整的小提琴：jsfiddle.net/nXMqc
2021-03-14 23:58:55
不错的 Eirik，喜欢用 live（忘记了！）。
2021-03-16 23:58:55
我发现 live() 中的错误和 jQuery 已经弃用了它。使用 on() 代替。如果你关心为什么：britishdeveloper.co.uk/2012/04/...
2021-03-26 23:58:55
但是如果他们在中间编辑，这会杀死最后一个角色，而不是新角色，对吧？
2021-03-30 23:58:55
切片的问题是，如果您在中间输入字符，则会插入它们并从末尾切掉字符串。如果无法立即看到整个文本，这可能会令人困惑。同样使用 val(..) 函数来更改值似乎将光标移动到字符串的末尾。（如果你想用现代浏览器在 fiddle 中测试这些，你需要删除 maxlength 属性 - 否则浏览器将强制执行限制）。
2021-04-06 23:58:55

更新使用 Eirik 的解决方案 using.live()因为它更健壮一些。

即使您想要一个不使用 jQuery 的解决方案，我想我还是会为任何通过 Google 找到此页面并寻找 jQuery 式解决方案的人添加一个：

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

希望这对您那里的 Google 员工有用...

keyup 绑定函数应该是： $(this).val($(this).val().slice(0, maxlength));
2021-03-14 23:58:55
@brian 是的，你说得对。感谢您发现我的错误，已修复！
2021-03-28 23:58:55
$(this).val(function(i, val){ return val.slice(0, maxlength) });
2021-04-03 23:58:55
此代码段仍然有用，因为换行在浏览器中被计为 1 个字符，在服务器中被计为 2 个字符...
2021-04-10 23:58:55

HTML5maxlength为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 上测试）

此解决方案避免了 IE 中添加文本中间字符时删除最后一个字符的问题。它也适用于其他浏览器。

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

我的表单验证然后处理用户可能粘贴的任何问题（仅在 IE 中似乎是一个问题）超过 textarea 最大长度的文本。

其它你可能感兴趣的问题
上一篇如何以编程方式清空浏览器缓存？ 下一篇IE 中的下拉列表宽度