У меня есть следующий код, и я как бы застрял в том, что делать дальше. Идея заключается в том, когда вы вводите текст в текстовую область, счетчик сообщает вам, сколько оставшихся символов осталось. Как только вы дойдете до максимальных символов, я хочу прекратить вводить символы или удалить все введенные символы, так что в текстовой области всего 10 символов. Я знаю, что мне нужно поместить код, где он говорит alert("LONG");, но я не совсем уверен, что.
var maxLen = 10;
console.log("Start");
$('#send-txt').keyup(function(){
var Length = $("#send-txt").val().length;
var AmountLeft = maxLen - Length;
$('#txt-length-left').html(AmountLeft);
if(Length >= maxLen){
alert("LONG");
}
});
Вот так. Все, что выходит за пределы персонажа, будет удалено.
$('textarea').keypress(function(e) {
var tval = $('textarea').val(),
tlength = tval.length,
set = 10,
remain = parseInt(set - tlength);
$('p').text(remain);
if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
$('textarea').val((tval).substring(0, tlength - 1));
return false;
}
})
Все эти ответы немного странные, потому что они пытаются сделать слишком много. Более простой и визуально более приятный способ (поскольку он показывает, что текст быстро обрезается) - и с меньшими странностями, чем в предыдущем примере (обратите внимание, как он перезаписывает последний ключ?), - просто сократить количество символов в keyUp на номер, который позволил.
var textlimit = 400;
$('textarea').keyup(function() {
var tlength = $(this).val().length;
$(this).val($(this).val().substring(0, textlimit));
var tlength = $(this).val().length;
remain = textlimit - parseInt(tlength);
$('#remain').text(remain);
});
Обратите внимание, что это также работает для вставки в текст, как некоторые из примеров выше.
Пример здесь: http://jsfiddle.net/PzESw/5/
Возврат false и использование .keypress() вместо .keyup() останавливает ввод после достижения длины. Вот пример в jsFiddle:
Обновлено, чтобы разрешить backspace.
Простым способом сделать это - установить текст в текстовом поле подстроке полной суммы. Здесь вы можете найти пример:
http://www.mediacollege.com/internet/javascript/form/limit-characters.html
Получил это:
$("#div_id").prop('maxlength', '80');
Я действительно не знаю, если что-то не так с этим решением, но это сработало для меня.
Если вы измените свой js, чтобы выглядеть так, он должен работать для вас:
var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing
$('#send-txt').keydown(function(e) { //take the event argument
var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM
var AmountLeft = maxLen - Length;
$txtLenLeft.html(AmountLeft);
if(Length >= maxLen && e.keyCode != 8){ // allow backspace
e.preventDefault(); // cancel the default action of the event
}
});
Здесь вы можете увидеть рабочий пример: http://jsfiddle.net/aP5sK/2/
ehm, textarea maxlength является допустимым атрибутом в html5? не поддерживается в ie9, вот и все.
w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength
w3fools http://www.w3schools.com/tags/att_textarea_maxlength.asp
Здесь решение с использованием атрибута данных HTML5 автоматически привязывается ко всем необходимым текстовым областям:
$('textarea[data-max-length]').live('keypress', function(e) {
if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) {
e.preventDefault();
}
});
Я знаю, что это немного поздно, но я просто должен был понять это. Мне пришлось заставить его работать с байтами UTF8 и разрешить некоторые нажатия клавиш. Вот что я придумал:
checkContent = function (event) {
var allowedKeys = [8,46,35,36,37,38,39,40];
var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode));
if (charLength + contentLength > 20) {
if(jQuery.inArray(event.keyCode, allowedKeys) == -1) {
event.preventDefault();
}
}
}
countLength = function(event) {
var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
jQuery('#length').html(len);
}
lengthInUtf8Bytes = function(str) {
var m = encodeURIComponent(str).match(/%[89ABab]/g);
return str.length + (m ? m.length : 0);
}
jQuery(function(){jQuery("#textarea").keypress(function(event){checkContent(event)}).keyup(function(event){countLength(event)})});
Вам нужно иметь текстовое поле с id #textarea и элемент для отображения текущей длины с id #length.
Событие нажатия клавиши определяет, разрешать или не разрешать нажатие клавиши. Событие keyup подсчитывает размер данных в поле после нажатия/предотвращения нажатия клавиши.
Этот код работает со следующими ключами: home, end, pagedown, pageup, backspace, delete, up, down, left и right. Это не касается вставки из буфера обмена.
Надеюсь, что кто-то сочтет это полезным!
Полагаясь на нажатия клавиш, keydown, keyup является ошибочным решением, поскольку пользователь может копировать и вставлять данные в текстовое поле без нажатия каких-либо клавиш.
Чтобы ограничить длину текста в текстовой области с помощью javascript, независимо от того, как туда попадают данные, вы должны вместо этого использовать таймер setInterval.
setInterval(function() {
if ($('#message').val().length > 250) {
$('#message').val($('#message').val().substring(0, 250));
}}, 500);
Очевидно, я предполагаю, что у вас есть идентификатор сообщения, назначенного для вашего текстового поля.
попробуйте это.
var charLmt = "200";//max charterer
$("#send-txt").keydown(function(){
var _msgLenght = $(this).val().length;
if (_msgLenght > charLmt) {
$(this).val($(this).val().substring(0, charLmt));
}
});
$("#message-field").on("keyup paste", function() {
var $this, limit, val;
limit = 140;
$this = $(this);
val = $this.val();
$this.val(val.substring(0, limit));
return $('#character-remaining').text(limit - $this.val().length);
});
Попробуйте это. Даже работает для копирования пасты с клавиатуры:
$("#comments").unbind('keyup').keyup(function(e){
var val = $(this).val();
var maxLength = 1000;
$('#comments').val((val).substring(0, maxLength));
$("#comments_length").text($("#comments").val().length);
});
Я считаю, что это работает отлично, и даже не запускает лишние символы в текстовом поле, прежде чем удалять их, как это делают некоторые другие решения.
<h1>Add a comment:</h1>
<form>
<textarea name="commentText" id="commentText"></textarea>
</form>
<br><span id="commentChars">1000</span> characters remaining
<script type="text/javascript">
function checkChars(){
var numChars = $('#commentText').val().length;
var maxChars = 1000;
var remChars = maxChars - numChars;
if (remChars < 0) {
$('#commentText').val($('#commentText').val().substring(0, maxChars));
remChars = 0;
}
$('#commentChars').text(remChars);
}
$('#commentText').bind('input propertychange', function(){
checkChars();
});
checkChars();
</script>
Я думаю, что лучший способ, используя свойство maxlenght + JQuery Keydown, Keyup, Вставить события
// text input maximum lenght
$(document).on('keydown keyup paste', 'input[type=text]', function(e) {
var textArea = $('input[type=text]').val(),
textLenght = textArea.length,
limit = $('textarea').attr('maxlength'),
remain = 'left ' + parseInt(limit - textLenght) + ' chars';
$('#remain-title').text(remain);
if (textLenght > 500) {
$('textarea').val((textArea).substring(0, limit))
}
});
// tex area maximum lenght
$(document).on('keydown keyup paste', 'textarea', function(e) {
var textArea = $('textarea').val(),
textLenght = textArea.length,
limit = $('textarea').attr('maxlength'),
remain = 'left ' + parseInt(limit - textLenght) + ' chars';
$('#remain-description').text(remain);
if (textLenght > 500) {
$('textarea').val((textArea).substring(0, limit))
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>Title</label>
<p id="remain-title"></p>
<input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
<label>Description</label>
<p id="remain-description"></p>
<textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>