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

Я хотел бы иметь возможность ограничить количество символов в текстовом поле. Метод, который я использую, отлично работает в Google Chrome, но работает медленно в Firefox и не работает в IE.

Javascript:

function len(){ t_v=textarea.value; if(t_v.length>180){ long_post_container.innerHTML=long_post; post_button.className=post_button.className.replace('post_it_regular','post_it_disabled'); post_button.disabled=true; } else{ long_post_container.innerHTML=""; post_button.className=post_button.className.replace('post_it_disabled','post_it_regular'); post_button.disabled=false; } if(t_v.length>186){ t_v=t_v.substring(0,186); } } 

HTML:

  

Javascript внизу элемента body:

 textarea=document.getElementById('user_post_textarea'); 

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

Благодаря комментарию @Dan Tello я исправил его, так что он работает и в IE7 +:

HTML:

  

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

демонстрация

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

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

Обновление: вот 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)); 

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

var t2 = / * textarea ссылка * /

 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= ''; } } } 

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

Попробуй это:

 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; } 

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

Даниил

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

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

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

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

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

Я считаю, что если вы будете использовать делегатов, это сработает.

 $("textarea").on('change paste keyup', function () { var currText = $(this).val(); if (currText.length > 500) { var text = $(this).text(); $(this).text(text.substr(0, 500)); alert("You have reached the maximum length for this field"); } }); 

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

веселит.

 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); } } 
 ... onkeydown="if(value.length>500)value=value.substr(0,500); if(value.length==500)return false;" ... 

Это должно сработать.

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