29

一旦达到最大字符限制，我想阻止用户在 textarea 中输入文本。当我达到最大限制时发生了什么，然后我的文本区域滚动条移动到顶部，我以某种方式用这段代码阻止了这种情况。

jQuery(document).ready(function($) {
    $('textarea.max').keyup(function() {
        var $textarea = $(this);
        var max = 400;
        if ($textarea.val().length > max) {
            var top = $textarea.scrollTop();
            $textarea.val($textarea.val().substr(0, max));
            $textarea.scrollTop(top);

        }
    });
}); //end if ready(fn)

但我也希望在达到最大限制后用户无法在 textarea 中输入任何内容。目前，如果用户按住键达到最大限制后，字符会在文本区域中输入，尽管在释放按钮后它会返回原始文本（即 $textarea.val($textarea.val(). substr(0, 最大值));)。但我希望一旦这种情况成为现实

if ($textarea.val().length > max) {

用户无法输入任何内容。我希望光标从文本区域中消失。但是如果用户删除了一些文本，那么光标也可供用户再次输入。我该怎么做？

4

9 回答 9

57

该keyup事件在默认行为（填充文本区域）发生后触发。

最好使用keypress事件，过滤不可打印的字符。

演示： http: //jsfiddle.net/3uhNP/1/（最大长度为 4）

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)
于 2012-05-02T13:10:33.390 回答
36 
<textarea maxlength="400"> </textarea>

使用上面的代码来限制插入文本区域的字符数，如果你想禁用文本区域本身（即，之后将无法编辑），你可以使用 javascript/jquery 禁用它。

于 2012-05-02T13:12:13.017 回答
4

把事情简单化 

var max = 50;
$("#textarea").keyup(function(e){
$("#count").text("Characters left: " + (max - $(this).val().length));
});

并将其添加到您的 html 中

<textarea id="textarea" maxlength="50"></textarea>
<div id="count"></div>

查看示例

于 2014-02-19T12:51:49.863 回答
2

只需在您的 Javascript 文件中编写此代码。但需要使用 textarea 指定“maxlength”属性。这将适用于页面的所有文本区域。

$('textarea').bind("change keyup input",function() {

        var limitNum=$(this).attr("maxlength");

        if ($(this).val().length > limitNum) {
            $(this).val($(this).val().substring(0, limitNum));
        }

    });
于 2013-06-12T13:05:06.210 回答
1

你可以直接给maxlength禁用textarea它自己。但是，您想显示适当的消息，然后将keyup事件用于默认行为和textarea length计算字符并显示适当的消息。

HTML

<div id="count"></div>
<textarea class="max"  maxlength="250" id="tarea"></textarea>
<div id="msg"></div>

jQuery

$(function(){
    var max = parseInt($("#tarea").attr("maxlength"));
  $("#count").text("Characters left: " + max);
    $("#tarea").keyup(function(e){
        $("#count").text("Characters left: " + (max - $(this).val().length));
    if($(this).val().length==max)
        $("#msg").text("Limit Reached....");
        else
        $("#msg").text("");
    });
});

演示小提琴

于 2016-03-01T14:49:42.153 回答
0

您可以使用此插件而不是尝试编写自己的插件。我发现它工作得很好。

于 2012-05-02T13:15:05.650 回答
0

你可以保持你的活动原样，只使用这个库

例子

// applying a click event to one element

Touche(document.querySelector('#myButton')).on('click', handleClick);

// or to multiple at once

Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks);

// or with jQuery

$('.myButtons').on('click', handleClicks);
于 2015-03-24T07:52:24.100 回答
0

对于那些已经在浏览器中使用 ES2015 的人，这里是使用上面一些答案的实现：

class InputCharacterCount {
  constructor(element, min, max) {
    this.element = element;
    this.min = min;
    this.max = max;
    this.appendCharacterCount();
  }

  appendCharacterCount(){
    let charCount = `<small class="char-counter help-block"></small>`;
    this.element.closest('.form-group').append(charCount);
  }

  count(event){
    this.element.attr('maxlength', this.max); // Add maxlenght attr to input element

    let value = this.element.val();
    this.element
      .closest('.form-group')
      .find('.char-counter')
      .html(value.length+'/'+this.max); // Add a character count on keyup/keypress

    if (value.length < this.min || value.length > this.max) { // color text on min/max changes
      this.element.addClass('text-danger');
    } else {
      this.element.removeClass('text-danger');
    }
  }
}

用法：

let comment = $('[name="collection-state-comment"]');
let counter = new InputCharacterCount(comment, 21, 140);
$(comment).keyup(function(event){
  counter.count(event);
});
于 2016-06-03T17:18:08.440 回答
-1 
 <script type="text/javascript">
        $(document).ready(function () {
            maxlength("TextArea1");
        });
        function maxlength(id) {
            $('#' + id).on('input propertychange', function () {
                CharLimit(this, 20);
            });
        }

        function CharLimit(input, maxChar) {
            var len = $(input).val().length;
            if (len > maxChar) {
                $(input).val($(input).val().substring(0, maxChar));
            }
        }
 </script>
于 2019-02-21T12:02:24.057 回答