Ограничение символа textarea

Ответ 1

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

Спасибо комментарий @Dan Tello Я исправил его, поэтому он работает и в IE7 +:

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

JavaScript:

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text"));

Демо

нет такой вещи, как атрибут minlength в HTML5.
Для следующих типов ввода: number, range, date, datetime, datetime-local, month, time и week (который еще не полностью поддерживаются) используют атрибуты min и max.

Ответ 2

Это полностью непроверенный, но он должен делать то, что вам нужно.

Обновление: здесь можно посмотреть jsfiddle. Кажется, работает. ссылка

Вы пропустили его в файл js и ссылаетесь на него после ссылки на jquery. Тогда вы бы назвали это так.

$("textarea").characterCounter(200);

Краткое объяснение того, что происходит.

В каждом событии keyup функция проверяет, какой тип клавиши нажат. Если это приемлемо, счетчик проверяет счетчик, обрезает любой избыток и предотвращает любой дополнительный ввод после достижения предела.

Плагин также должен обрабатывать вставку в цель.

  ; (function ($) {
        $.fn.characterCounter = function (limit) {
            return this.filter("textarea, input:text").each(function () {
                var $this = $(this),
                  checkCharacters = function (event) {

                      if ($this.val().length > limit) {

                          // Trim the string as paste would allow you to make it 
                          // more than the limit.
                          $this.val($this.val().substring(0, limit))
                          // Cancel the original event
                          event.preventDefault();
                          event.stopPropagation();

                      }
                  };

                $this.keyup(function (event) {

                    // Keys "enumeration"
                    var keys = {
                        BACKSPACE: 8,
                        TAB: 9,
                        LEFT: 37,
                        UP: 38,
                        RIGHT: 39,
                        DOWN: 40
                    };

                    // which normalizes keycode and charcode.
                    switch (event.which) {

                        case keys.UP:
                        case keys.DOWN:
                        case keys.LEFT:
                        case keys.RIGHT:
                        case keys.TAB:
                            break;
                        default:
                            checkCharacters(event);
                            break;
                    }   

                });

                // Handle cut/paste.
                $this.bind("paste cut", function (event) {
                    // Delay so that paste value is captured.
                    setTimeout(function () { checkCharacters(event); event = null; }, 150);
                });
            });
        };
    } (jQuery));

Ответ 3

Это работает на клавиатуре и вставке, он окрашивает текст в красный цвет, когда вы почти до предела, обрезает его, когда вы переходите, и предупреждает, что вы редактируете текст, который вы можете сделать.

var t2 =/* textarea reference */

t2.onkeyup= t2.onpaste= function(e){
    e= e || window.event;
    var who= e.target || e.srcElement;
    if(who){
        var val= who.value, L= val.length;
        if(L> 175){
            who.style.color= 'red';
        }
        else who.style.color= ''
        if(L> 180){
            who.value= who.value.substring(0, 175);
            alert('Your message is too long, please shorten it to 180 characters or less');
            who.style.color= '';
        }
    }
}

Ответ 4

Я думаю, что делать это может быть проще, чем думают многие люди!

Попробуйте следующее:

var yourTextArea = document.getElementById("usertext").value;
// In case you want to limit the number of characters in no less than, say, 10
// or no more than 400.        
    if (yourTextArea.length < 10 || yourTextArea.length > 400) {
        alert("The field must have no less than 10 and no more than 400 characters.");
        return false;
    }

Пожалуйста, дайте мне знать, что это было полезно. И если да, проголосуйте! спасибо!

Daniel

Ответ 5

используя атрибут maxlength для textarea, выполнит трюк... простой код html.. не требуется проверка JS или JQuery или серверной стороны....

Ответ 6

Попробуйте использовать jQuery, чтобы избежать проблем с совместимостью между браузерами...

$("textarea").keyup(function(){
    if($(this).text().length > 500){
        var text = $(this).text();
        $(this).text(text.substr(0, 500));   
    }
});

Ответ 7

Быстрая и грязная универсальная версия jQuery. Поддержка копирования/вставки.

$('textarea[maxlength]').on('keypress mouseup', function(){
    return !($(this).val().length >= $(this).attr('maxlength'));
});

Ответ 8

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

приветствий.

function TextareaControl(textarea,charlimit,charCounter){
    if(
            textarea.tagName.toLowerCase() === "textarea" && 
            typeof(charlimit)==="number" &&
            typeof(charCounter) === "object" && 
            charCounter.innerHTML !== null
    ){
        var oldValue = textarea.value;
        textarea.addEventListener("keyup",function(){
            var charsLeft = charlimit-parseInt(textarea.value.length,10);
            if(charsLeft<0){
                textarea.value = oldValue;
                charsLeft = charlimit-parseInt(textarea.value.length,10);
            }else{
                oldValue = textarea.value;
            }
            charCounter.innerHTML = charsLeft;
        },false);
    }
}

Ответ 9

... onkeydown="if(value.length>500)value=value.substr(0,500); if(value.length==500)return false;" ...

Он должен работать.

Ответ 10

  $(function()
	  {
	     $("#QtChar")[0].innerText = "Quantidade de Caracteres Restantes "+ parseInt($("#txtMensagem")[0].maxLength);
	  });
	  function tamanhoMensagem()
	  {
	     $("#QtChar")[0].innerText = "Quantidade de Caracteres Restantes "+ parseInt($("#txtMensagem")[0].maxLength - $("#txtMensagem").val().length);	
	  }

<html>
	<head>
	   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	 <body>
	   <textarea id="txtMensagem" maxlength="10" onkeyup="tamanhoMensagem()" ></textarea>
	   <label id="QtChar"> </label>
	 <body>
</html>