Как я могу заблокировать дальнейший ввод в textarea, используя maxlength - PullRequest
Новая
       3

Как я могу заблокировать дальнейший ввод в textarea, используя maxlength

5 голосов
/ 26 августа 2010

У меня есть текстовая область, на которой я хочу заблокировать ввод, если введенные символы достигают максимальной длины.

В настоящее время у меня есть скрипт Jquery для текстового поля, который вычисляет введенные символы, и хочу добавить что-то, что будет блокировать ввод в текстовой области после ввода 150 символов.

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

ТЕКУЩИЙ КОД 

(function($) {
    $.fn.charCount = function(options){
        // default configuration properties
        var defaults = {    
            allowed: 150,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            container: undefined // New option, accepts a selector string
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj,$cont) {
              // $cont is the container, now passed in instead.
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $cont.addClass(options.cssWarning);
            } else {
                $cont.removeClass(options.cssWarning);
            }
            if(available < 0){
                $cont.addClass(options.cssExceeded);
            } else {
                $cont.removeClass(options.cssExceeded);
            }
            $cont.html(options.counterText + available);
        };

        this.each(function() {
         // $container is the passed selector, or create the default container
            var $container = (options.container)
                    ? $(options.container)
                        .text(options.counterText)
                        .addClass(options.css)
                    : $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this);
            calculate(this,$container);
            $(this).keyup(function(){calculate(this,$container)});
            $(this).change(function(){calculate(this,$container)});
        });

    };
})(jQuery);

Ответы [ 5 ]

6 голосов
/ 27 августа 2010

Вам гораздо лучше не пытаться запретить пользователю вводить слишком много символов, а вместо этого показывать счетчик и применять ограничение количества символов только тогда, когда пользователь пытается отправить. Окна комментариев Stack Overflow - достойный пример. С технической точки зрения и технически, и, что более важно, пользователю удобнее делать это следующим образом: действительно раздражает отсутствие возможности вводить / вставлять / перетаскивать текст в текстовую область, даже если вы знаете, что есть ограничение на число символов.

6 голосов
/ 26 августа 2010

Вы пробовали атрибут maxlength? Это заблокирует ввод, как только будет достигнут предел символов. 

<textarea maxlength='150'></textarea>​​​​​​​​​​​​​​​​​​​​​​​​​​ // Won't work
<input type='text' maxlength='150' />

Редактировать Похоже, что maxlength для текстовой области работает в Chrome, но не в других браузерах, мой плохой. Ну, другой подход - просто отслеживать события нажатия клавиш, и если длина> 150, вернуть false / protectDefault /, однако вы хотите остановить действие по умолчанию. Однако вы все равно хотите разрешить возврат и ввод, так что следите также и за кодом ключа. 

$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
            e.preventDefault();
});
4 голосов
/ 26 августа 2010

Textarea maxlength с Jquery работает нормально, но, вероятно, не решает проблему вставки больших объемов текста.

PB Edit: с тех пор обновлено здесь

1 голос
/ 18 сентября 2013

Попробуйте этот код ниже, я надеюсь, что он будет работать, не забудьте включить библиотеку jQuery 

<div class="texCount"></div>
<textarea class="comment"></textarea>

$(document).ready(function(){
    var text_Max = 200;      
    $('.texCount').html(text_Max+'Words');

    $('.comment').keyup(function(){        
        var text_Length = $('.comment').val().length;        
        var text_Remain = text_Max - text_Length;       
        $('.texCount').html(text_Remain + 'Words');

        $('.comment').keydown(function(e){         
            if(text_Remain == 0){
                e.preventDefault();
            }
        });
    });    
});
0 голосов
/ 26 августа 2010

Вы можете обрезать содержимое текстовой области, если оно превышает 150 символов, как описано в http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. Я могу видеть некоторые проблемы с копированием / вставкой, если это приводит к превышению лимита текста.

...