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

116

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

<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 textarea上模拟HTML输入的“ maxlength”属性的最佳方法是什么？

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

javascript  html  textarea 
— 拉克什·朱亚尔（Rakesh Juyal）
source
4
用于textareas的maxlenth在html5中。目前，它可以在Chrome浏览器中使用，但不能在Firefox中使用。
— 戴夫

Answers:

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

}
— 乔什·斯托多拉
source
3
Josh似乎可以使用，但是您能否解释一下这件事会做些什么--- if（/ ^ [0-9] + $ /。test（txts [i] .getAttribute（“ maxlength”）））{- -
— 拉克什Juyal
2
我想我记得这是怎么回事：FF或IE（我认为是FF）在Javascript检查“值”属性时返回的字符串与在表单发布时返回给服务器的字符串不同！它与换行符是否插入/不插入回车符有关。通过客户端和服务器端的一些调试代码很容易弄清楚。
— Pointy 2010年
7
我切换了警报的顺序和值truncate-按照原始顺序，onkeyup会发出警报，因为该字段尚未被截断，导致控件失去焦点，并且onblur触发。
— GalacticCowboy 2010年
1
@JoshStodola- onblur在用户单击文本区域之前，不会处理粘贴。onkeyup如果通过上下文菜单或浏览器菜单完成粘贴，将不会处理。如果您不需要筛选粘贴，则此方法有效。请参阅此答案以获取基于计时器的方法stackoverflow.com/a/10390626/1026459
— Travis J
3
@JoshStodola-确实不能。如果我在文本区域中粘贴了全部内容，然后单击“提交”，而只看到其中的一小部分没有任何反应，那真会让我感到烦恼。
— 特拉维斯J
80

我知道您想避免使用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));
    }
});
— 埃里克·W
source
1
尼斯Eirik，喜欢现场直播（忘了它！）。
— Dana Woodman
5
从那以后，我发现live（）和jQuery中的错误不推荐使用。使用on（）代替。如果你关心为什么：britishdeveloper.co.uk/2012/04/...
— BritishDeveloper
6
但是，如果他们在中间进行编辑，则会杀死最后一个角色，而不是新角色，对吗？
— Joe Mabel 2012年
6
是的on（）使用，它就像一个宝石。谢谢。这是一个经过修改和微调的小提琴：jsfiddle.net/nXMqc
— B-Money
6
切片的问题是，如果您在中间输入字符，则会将其插入并从末尾截断字符串。如果整个文本一次不可见，这可能会造成混淆。同样使用val（..）函数更改值似乎会将光标移到字符串的末尾。（如果您想在现代浏览器中进行测试，则需要删除maxlength属性-否则浏览器将强制执行限制）。
— JuhaPalomäki13年
33

更新使用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员工...

— 达娜·伍德曼（Dana Woodman）
source
1
键盘绑定绑定函数应为：$（this）.val（$（this）.val（）。slice（0，maxlength））;
— 布莱恩·瓦莱伦加
@brian是，你是对的。感谢您发现我的错误，已修复！
— Dana Woodman
$（this）.val（function（i，val）{return val.slice（0，maxlength）}）;
— 2011年
这个摘要仍然很有用，因为换行在浏览器中被视为1个字符，在服务器中被视为2个字符……
— bebbo
32

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

— 詹姆斯·加里斯
source
5

此解决方案避免了IE中出现的问题，即在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中的一个问题）文本超出文本区域最大长度的任何问题。

— 克里斯·R
source
4

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

（再次对不要求使用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");

    });
});

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

— 西蒙·伊斯特
source
2

还要添加以下事件以处理粘贴到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;
  }
}

...
— Stusherwin
source
如果有人认为可以，可以将其添加到答案正文中吗？没有足够的积分来做到这一点。
— stusherwin 2010年
粘贴功能未标准化。我相信它仅在IE中有效。
— 乔什·斯托多拉
我更新了答案以处理粘贴情况。谢谢！
— 乔什·斯托多拉
2

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

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

来自HTML maxlength属性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属性w3schools.com

— 伊森
source
1

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

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

    if (val.length > maxlength) {
        return false;
    }
});
— 巴拉特
source
1

您可以使用jQuery使其变得简单明了

JSFiddle 演示

<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

— 最大回声
source
我担心在执行处理程序时，text在更新之前，将其填充为texarea的“值”。这意味着您的测试应该是if( text.length +1 > maxlength) {return false;}。否则，只能将maxlength - 1字符放入其中:/
— Stphane 2015年
您的小提琴使用户可以再输入一个字符。IMO，您的测试应该是if(text.length+1 > maxlength)或if(text.length >= maxlength)...
— Stphane
当我复制和粘贴内容时，它无法正常工作
— Ranjit Kumar 2015年
0

上面的代码的一个小问题是val（）不会触发change（）事件，因此，如果您使用骨干.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;
    });

});
— 亚历山大·别列茨基
source
0

我最近实施了maxlength行为textarea，并遇到此问题中描述的问题：Chrome使用maxlength属性在textarea中计数错误的字符。

因此，此处列出的所有实现都不会带来任何问题。为了解决这个问题，我在.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)));
}

不确定是否可以完全解决问题，但目前对我有效。

— 罗曼·波米诺夫（Roman Pominov）
source
0

尝试使用可在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>
— 莱斯利·金（Leslie King）
source
0

尝试使用以下代码示例：

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

这要容易得多：

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

— 雌性
source
2
请注意，此解决方案无法完全复制，maxlength因为您可以粘贴长度超过所需长度的字符串。
— 克里斯·比尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.