Как запретить пользователю вводить текст в 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.val($ textarea.val()). substr (0, max));). Но я хочу, чтобы как только это условие стало истинным

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

пользователь не может ввести что-либо. Я хочу, чтобы этот курсор исчез из текстового поля. Но если пользователь удалит какой-то текст, тогда курсор также будет доступен для повторного ввода ввода пользователем. Как я могу это сделать?

Ответы

Ответ 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 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)

Ответ 2

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

Используйте приведенный выше код, чтобы ограничить количество символов, вставленных в текстовую область, если вы хотите отключить само текстовое поле (т.е. не сможете редактировать впоследствии), вы можете использовать javascript/jquery для его отключения.

Ответ 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>

просмотреть пример

Ответ 4

Просто напишите этот код в файле Javascript.. Но нужно указать атрибут 'maxlength' с помощью textarea. Это будет работать для всех текстовых областей страницы.

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

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

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

    });

Ответ 5

Вы можете использовать этот плагин вместо того, чтобы пытаться написать свой собственный. Я обнаружил, что он работает очень хорошо.

Ответ 6

Вы можете сохранить свое событие так, как есть, и просто используйте эту библиотеку

<сильные > Примеры

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

Ответ 7

Вы можете напрямую передать maxlength в textarea, чтобы отключить себя. Но вы хотите показать соответствующее сообщение, затем используйте событие keyup для поведения по умолчанию и textarea length для вычисления charcter и отображения соответствующего сообщения.

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

Демо-скрипт

Ответ 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);
});