Как наложить maxlength на textArea в HTML с помощью JavaScript
Я хотел бы иметь некоторую функциональность, с помощью которой, если я пишу
<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>
он автоматически наложит максимальную длину на textArea. Если возможно, не предоставляйте решение в jQuery.
Примечание. Это можно сделать, если я сделаю что-то вроде этого:
<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">
function imposeMaxLength(Event, Object, MaxLen)
{
return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}
Скопировано из Каков наилучший способ эмуляции атрибута "maxlength" в HTML-тексте в текстовом поле HTML?
Но дело в том, что я не хочу писать onKeyPress и onKeyUp каждый раз, когда я объявляю textArea.
Ответы
Ответ 1
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA');
for(var i = 0, l = txts.length; i < l; i++) {
if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
var func = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if(this.value.length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
};
}
Ответ 2
Я знаю, что вы хотите избежать jQuery, но поскольку для этого решения требуется JavaScript, это решение (с использованием jQuery 1.4) является наиболее consise и надежным.
Вдохновленный, но улучшение над Даной Вудман отвечает:
Изменения в этом ответе: Упрощенный и более общий, используя jQuery.live, а также не устанавливая val, если длина в порядке (приводит к работе со стрелками в IE и заметному ускорению в IE):
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});
EDIT: обновлена версия jQuery 1.7+, используя on вместо live
// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
// Store the maxlength and value of the field.
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
// Trim the field if it has content over the maxlength.
if (val.length > maxlength) {
$(this).val(val.slice(0, maxlength));
}
});
Ответ 3
Обновить. Используйте решение Eirik с помощью .live(), так как оно немного более надежное.
Несмотря на то, что вам нужно решение, которое не использовало jQuery, я подумал, что добавлю его для тех, кто найдет эту страницу через Google и ищет решение jQuery-esque:
$(function() {
// Get all textareas that have a "maxlength" property.
$('textarea[maxlength]').each(function() {
// Store the jQuery object to be more efficient...
var $textarea = $(this);
// Store the maxlength and value of the field.
var maxlength = $textarea.attr('maxlength');
var val = $textarea.val();
// Trim the field if it has content over the maxlength.
$textarea.val(val.slice(0, maxlength));
// Bind the trimming behavior to the "keyup" event.
$textarea.bind('keyup', function() {
$textarea.val($textarea.val().slice(0, maxlength));
});
});
});
Надеюсь, что вам полезна гуглеры...
Ответ 4
HTML5 добавляет атрибут maxlength к элементу textarea, например:
<!DOCTYPE html>
<html>
<body>
<form action="processForm.php" action="post">
<label for="story">Tell me your story:</label><br>
<textarea id="story" maxlength="100"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
В настоящее время это поддерживается в Chrome 13, FF 5 и Safari 5. Не удивительно, что это не поддерживается в IE 9. (Проверено на Win 7)
Ответ 5
Это решение позволяет избежать проблемы в IE, где последний символ удаляется при добавлении символа в середине текста. Он также отлично работает с другими браузерами.
$("textarea[maxlength]").keydown( function(e) {
var key = e.which; // backspace = 8, delete = 46, arrows = 37,38,39,40
if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;
return $(this).val().length < $(this).attr( "maxlength" );
});
Моя проверка формы затем обрабатывает любые проблемы, в которых пользователь может встать (только кажется, является проблемой в IE) текст, превышающий максимальную длину текстового поля.
Ответ 6
Это какой-то измененный код, который я только что использовал на своем сайте. Улучшено отображение количества оставшихся символов пользователю.
(Извините еще раз, что ОП не запросил jQuery. Но если серьезно, кто не использует jQuery в эти дни?)
$(function() {
// Get all textareas that have a "maxlength" property.
$("textarea[maxlength]").each(function() {
// Store the jQuery object to be more efficient...
var $textarea = $(this);
// Store the maxlength and value of the field
var maxlength = $textarea.attr("maxlength");
// Add a DIV to display remaining characters to user
$textarea.after($("<div>").addClass("charsRemaining"));
// Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
$textarea.on("keyup blur", function(event) {
// Fix OS-specific line-returns to do an accurate count
var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
$textarea.val(val);
// Display updated count to user
$textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
}).trigger("blur");
});
});
НЕ тестировался с использованием международных многобайтовых символов, поэтому я не уверен, как это работает с ними.
Ответ 7
Также добавьте следующее событие для вставки в текстовое поле:
...
txts[i].onkeyup = function() {
...
}
txts[i].paste = function() {
var len = parseInt(this.getAttribute("maxlength"), 10);
if (this.value.length + window.clipboardData.getData("Text").length > len) {
alert('Maximum length exceeded: ' + len);
this.value = this.value.substr(0, len);
return false;
}
}
...
Ответ 8
Атрибут maxlength поддерживается в Internet Explorer 10, Firefox, Chrome и Safari.
Примечание. Атрибут maxlength тега <textarea> не поддерживается в Internet Explorer 9 и более ранних версиях или в Opera.
from HTML maxlength Атрибут w3schools.com
Для IE8 или более ранних версий вы должны использовать следующие
//only call this function in IE
function maxLengthLimit($textarea){
var maxlength = parseInt($textarea.attr("maxlength"));
//in IE7,maxlength attribute can't be got,I don't know why...
if($.browser.version=="7.0"){
maxlength = parseInt($textarea.attr("length"));
}
$textarea.bind("keyup blur",function(){
if(this.value.length>maxlength){
this.value=this.value.substr(0,maxlength);
}
});
}
P.S.
Атрибут maxlength тега <input> поддерживается во всех основных браузерах.
from HTML maxlength Атрибут w3schools.com
Ответ 9
Лучшее решение по сравнению с обрезкой значения текстового поля.
$('textarea[maxlength]').live('keypress', function(e) {
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
if (val.length > maxlength) {
return false;
}
});
Ответ 10
Вы можете использовать jQuery, чтобы упростить и очистить
JSFiddle DEMO
<textarea id="ta" max="10"></textarea>
<script>
$("#ta").keypress(function(e){
var k = e.which==0 ? e.keyCode : e.which;
//alert(k);
if(k==8 || k==37 || k==39 || k==46) return true;
var text = $(this).val();
var maxlength = $(this).attr("max");
if(text.length >= maxlength) {
return false;
}
return true;
});
</script>
Он тестируется в Firefox, Google Chrome и Opera
Ответ 11
Небольшая проблема с вышеприведенным кодом заключается в том, что val() не вызывает событие change(), поэтому, если вы используете backbone.js(или другие фреймворки для привязки к модели), модель не будет обновляться.
Я отправляю решение, отлично работающее для меня.
$(function () {
$(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
var maxLength = $(this).attr('maxlength');
if (e.keyCode > 47 && $(this).val().length >= maxLength) {
$(this).val($(this).val().substring(0, maxLength)).trigger('change');
}
return true;
});
});
Ответ 12
Недавно я реализовал поведение maxlength в textarea и столкнулся с проблемой, описанной в этом вопросе: Chrome считает символы неправильными в textarea с атрибутом maxlength.
Таким образом, все перечисленные здесь реализации будут работать некорректно. Чтобы решить эту проблему, я добавляю .replace(/(\r\n|\n|\r)/g, "11") до .length. И сохранил это в виду, когда вырезать строку.
Я закончил что-то вроде этого:
var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
el.val(val.slice(0, maxlength - (realLength - length)));
}
Не уверен, что он полностью решает проблему, но теперь это работает для меня.
Ответ 13
Попробуйте этот jQuery, который работает в IE9, FF, Chrome и предоставляет обратный отсчет для пользователей:
$("#comments").bind("keyup keydown", function() {
var max = 500;
var value = $(this).val();
var left = max - value.length;
if(left < 0) {
$(this).val( value.slice(0, left) );
left = 0;
}
$("#charcount").text(left);
});
<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>
Ответ 14
Попробуйте использовать этот пример кода:
$("#TextAreaID1").bind('input propertychange', function () {
var maxLength = 4000;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
});
Ответ 15
Это намного проще:
<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>
