如何防止用户在达到最大字符限制后在 textarea 中输入文本

Question

一旦达到最大字符限制，我想阻止用户在 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) {

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

Answer 1

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)

Answer 2

<textarea maxlength="400"> </textarea>

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

Answer 3

保持简单

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>

view example

Answer 4

只需在您的 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));
        }

    });

Answer 5

您可以直接将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("");
    });
});

Demo Fiddle

Answer 6

您可以保持活动原样，只需使用此 library

示例

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

Answer 7

对于那些已经在浏览器中使用 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);
});

Answer 8

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

Answer 9

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