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，max））;）。但是，一旦这种情况成为现实我就想要了

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

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

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>

使用上面的代码来限制插入文本区域的字符数，如果要禁用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

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

Answer 7

您可以按原样保留活动，只需使用 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 8

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

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

9 个答案: