Вопрос по jquery – Как запретить пользователю вводить текст в текстовой области после достижения максимального количества символов

27

Я хочу запретить пользователю вводить текст в текстовой области, как только он достигнет максимального количества символов. Происходило то, что, когда я достиг максимального предела, моя полоса прокрутки текстовой области переместилась наверх, и я каким-то образом предотвратил это с помощью этого кода.

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

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

Ваш Ответ

9   ответов
0

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

Обновил мою ссылку. Спасибо за указание на это.
Ссылка выше не работает, используйтеthis one Insted
49

keyup событие происходит после того, как произошло поведение по умолчанию (заполнение текстовой области).

Лучше использоватьkeypress событие и фильтрация непечатных символов.

Demo: 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)
@Basit 0x20 - это шестнадцатеричное обозначение для 32. Любой код ASCII ниже 32 не предназначен для печати. JQuery & APOS; sevent.which должен быть одинаковым во всех браузерах. Это не так. В Chrome0 сообщается для backspace, в Firefox, 8 сообщается.event.which дляkeypress событие представляетevent.charCode свойство, которое содержит код символа ASCII нажатой клавиши (ноль, если не символ).
спасибо, но после тестирования вашего кода. Как только он достигает максимального предела, он останавливается. Я не могу ввести слово. Но если затем я нажимаю клавишу возврата, то она также не работает. По крайней мере, пользователь имеет возможность нажать клавишу Backspace, чтобы удалить текст, а затем снова начать ввод. Кстати, это поведение, которое я хочу. Пользователь не может вводить что-либо после достижения максимального лимита. :) Как я могу сделать это, чтобы пользователь нажал клавишу возврата, чтобы удалить, а затем снова начать ввод текста. Спасибо Basit
Спасибо Роб W :) Но, пожалуйста, скажите, что вы использовали(e.which < 0x20) , Это означает, что все символы, такие как клавиша Backspace, Enter, Tab, Shift, недоступны для печати. Я прав? Вы также сказали, чтоnonprintable characters were not normalized to zero by jQuery, Что вы подразумеваете под ненормированным на 0? Можете ли вы объяснить это мне? Basit
@Basit Обновленный ответ. В Firefox непечатаемые символы не были нормализованы до нуля с помощью jQuery. Таким образом, вы должны вручную исключить это (asciitable.com).
Это будет работать, когда пользователь вводит символы. Но это не работает, когда пользователь копирует и вставляет текст
1

Но необходимо указать «maxlength» атрибут с текстовой областью. Это будет работать для всей текстовой области страницы.

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

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

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

    });
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);
});
25
<textarea maxlength="400"> </textarea>

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

Ад @RobW, пожалуйста, проверьтеjsfiddle.net/ucb3n  , РЕДАКТИРОВАТЬ: Протестировано на Firefox 12.0, Chrome 18.0, IE9. Не работал на IE9.
maxlength атрибут является новым для HTML5 и недоступен для Internet Explorer или Firefox & lt; 4. Тем не менее, +1, потому что это хорошее решение.
Пожалуйста, протестируйте решение в Firefox Chrome и Safari. Это решение ломается в Firefox версии 51.0.1 (64-битная версия).
Так просто. Умная! Спасибо
@RobW, спасибо за эту информацию. И я искренне верю, что нам всем давно пора использовать обновленные браузеры, за исключением, разумеется, людей, которым "НУЖЕН". Это.
0

как они есть, и просто использовать этобиблиотека

Examples

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

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

Пожалуйста, протестируйте решение в Firefox Chrome и Safari. Это решение ломается в Firefox версии 51.0.1 (64-битная версия).
1

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

Демо Фиддл

-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>
Привет и добро пожаловать в Stack Overflow! Совет: при публикации ответов рекомендуется объяснитьwhy ваш ответ хороший подход, иhow оно работает.
Пожалуйста, включите объяснение вашего кода и как он отвечает на вопрос.

Похожие вопросы