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

【问题标题】：How to impose maxlength on textArea in HTML using JavaScript如何使用 JavaScript 在 HTML 中的 textArea 上施加 maxlength
【发布时间】：2010-11-10 15:52:46
【问题描述】：

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

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

复制自What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?

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

【问题讨论】：

textareas 的最大长度在 html5 中。现在它适用于 Chrome，但不适用于 Firefox。

标签： javascript html textarea

【解决方案1】：

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

}

【讨论】：

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

【解决方案2】：

我知道您想避免使用 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));
    }
});

【讨论】：

不错的Eirik，喜欢用live（忘了！）。
我在 live() 中发现了错误，并且 jQuery 已经弃用了它。使用 on() 代替。如果你关心为什么：britishdeveloper.co.uk/2012/04/…
但是如果他们在中间编辑，这将杀死最后一个字符，而不是新字符，对吧？
是的，使用 on()，它就像一个宝石。谢谢。这是一个经过修改和微调的小提琴：jsfiddle.net/nXMqc
切片的问题是如果你在中间输入字符，它们会被插入，字符串会从末尾被剪切。如果整个文本一次都看不到，这可能会造成混淆。同样使用 val(..) 函数更改值似乎会将光标移动到字符串的末尾。（如果你想在小提琴中使用现代浏览器测试这些，你需要删除 maxlength 属性 - 否则浏览器将强制执行限制）。

【解决方案3】：

更新改用 Eirik 的解决方案，使用 .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));
@brian 是的，你是对的。感谢您发现我的错误，已修复！
$(this).val(function(i, val){ return val.slice(0, maxlength) });
这个 sn-p 仍然有用，因为换行符在浏览器中被计为 1 个字符，在服务器中被计为 2 个......

【解决方案4】：

HTML5 为textarea 元素添加了一个maxlength 属性，如下所示：

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

【讨论】：

【解决方案5】：

此解决方案避免了在 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 中似乎只是一个问题）超过文本区域最大长度的文本。

【讨论】：

【解决方案6】：

这是我刚刚在我的网站上使用的一些经过调整的代码。 改进了向用户显示剩余字符数。

（再次向没有要求 jQuery 的 OP 道歉。但是说真的，这些天谁不使用 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");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

尚未使用国际多字节字符进行测试，所以我不确定它是如何与这些字符一起工作的。

【讨论】：

【解决方案7】：

还添加以下事件来处理粘贴到文本区域：

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

【讨论】：

如果有人认为可以，可以将其添加到答案正文中吗？积分还不够。
粘贴功能不规范。我相信它只适用于 IE。
我更新了我的答案以处理粘贴情况。谢谢！

【解决方案8】：

Internet Explorer 10、Firefox、Chrome 和 Safari 支持 maxlength 属性。

注意： Internet Explorer 9 及更早版本或 Opera 不支持 <textarea> 标签的 maxlength 属性。

来自HTML maxlength Attribute w3schools.com

对于 IE8 或更早版本，您必须使用以下内容

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

附言

所有主流浏览器都支持<input>标签的maxlength属性。

来自HTML maxlength Attribute w3schools.com

【讨论】：

【解决方案9】：

你可以使用jQuery让它变得简单明了

JSFiddle DEMO

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

在Firefox、Google Chrome和Opera中测试

【讨论】：

我担心在执行处理程序时，text 在更新之前填充了 texarea 的“值”。这意味着您的测试应该是if( text.length +1 > maxlength) {return false;}。否则，只能将maxlength - 1 字符放入:/
你的小提琴让用户再输入一个字符。 IMO，您的测试应该是 if(text.length+1 > maxlength) 或 if(text.length >= maxlength)...
当我复制和粘贴内容时，它没有按预期工作

【解决方案10】：

比修剪 textarea 的值更好。

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

【讨论】：

【解决方案11】：

上面代码的小问题是 val() 不会触发 change() 事件，所以如果你使用backbone.js（或其他模型绑定框架），模型不会被更新。

我发布的解决方案对我来说效果很好。

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});

【讨论】：

【解决方案12】：

我最近在textarea 上实现了maxlength 行为，并遇到了这个问题中描述的问题：Chrome counts characters wrong in textarea with maxlength attribute。

因此，此处列出的所有实现都可以正常工作。为了解决这个问题，我在.length 之前添加了.replace(/(\r\n|\n|\r)/g, "11")。切弦时要牢记。

我以这样的方式结束：

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

不确定它是否能完全解决问题，但它现在对我有用。

【讨论】：

【解决方案13】：

试试这个适用于 IE9、FF、Chrome 并为用户提供倒计时的 jQuery：

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

【讨论】：

【解决方案14】：

尝试使用此代码示例：

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

【讨论】：

【解决方案15】：

这更容易：

&lt;textarea onKeyPress="return ( this.value.length &lt; 1000 );"&gt;&lt;/textarea&gt;

【讨论】：

请注意，此解决方案不会完全复制 maxlength，因为您可以粘贴长度超过所需长度的字符串。