Question

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

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

它会自动在textArea上施加maxlength。如果可能，请不要在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。

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

}

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

Answer 3

更新使用.live()使用Eirik的解决方案，因为它更强大。

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

$(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员工......

Answer 4

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

Answer 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中似乎只是一个问题）文本超过textarea的最大长度。

Answer 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");

    });
});

尚未使用国际多字节字符进行测试，因此我不确定它是如何与这些完全一致的。

Answer 7

还要添加以下事件来处理粘贴到textarea：

...

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

...

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

P.S。

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

来自HTML maxlength Attribute w3schools.com

Answer 9

与修剪textarea的值相比，更好的解决方案。

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

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

Answer 10

您可以使用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

中进行了测试

Answer 11

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

因此，此处列出的所有实现都将起到很小的作用。要解决此问题，请在.replace(/(\r\n|\n|\r)/g, "11")之前添加.length。切割弦时记住这一点。

我结束了这样的事情：

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

不确定它是否完全解决了问题，但它现在适用于我。

Answer 12

试试这款适用于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>

Answer 13

尝试使用此代码示例：

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

Answer 14

这更容易：

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

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

14 个答案: