Максимальное количество символов в текстовом поле с jquery

Я думаю, что лучше всего использовать свойство maxlenght + jquery keydown, keyup, paste события

// 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>

См. JSFiddle

Попробуй это. Даже работает для копирования вставки с клавиатуры:

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

попробуй это.

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function(){
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) {
   $(this).val($(this).val().substring(0, charLmt));
  }
});

Я знаю, что это немного поздно, но я просто должен был это выяснить. Мне пришлось заставить его работать с длинами в байтах 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)})});

Вам нужно иметь текстовое поле с идентификатором #textarea и элемент для отображения текущей длины с идентификатором #length.

Событие нажатия клавиши определяет, разрешить или нет нажатие клавиши. Событие keyup подсчитывает размер данных в поле после того, как нажатие разрешено / запрещено.

Этот код работает со следующими клавишами: home, end, pagedown, pageup, backspace, delete, вверх, вниз, влево и вправо. Это не касается вставки из буфера обмена.

Надеюсь, кто-то найдет это полезным!

Опираясь на нажатие клавиш, keydown, keyup является ошибочным решением, поскольку пользователь может копировать и вставлять данные в текстовую область, не нажимая никаких клавиш.

Чтобы ограничить длину текста в текстовой области с помощью javascript, независимо от того, как туда попадают данные, вы должны вместо этого положиться на таймер setInterval.

setInterval(function() {
if ($('#message').val().length > 250) {
    $('#message').val($('#message').val().substring(0, 250));
}}, 500);

Очевидно, я предполагаю, что у вас есть идентификатор сообщения, назначенного вашей текстовой области.

ehm, textarea maxlength является допустимым атрибутом в html5? не поддерживается в ie9, вот и все.

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3fools http: // www .w3schools.com / метки / att_textarea_maxlength.asp

Если вы измените свой 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/

Понял это:

$("#div_id").prop('maxlength', '80');

Я действительно не знаю, если что-то не так с этим решением, но оно сработало для меня.

Вот решение, использующее атрибут данных 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();
    }
});

Возврат false и использование .keypress () вместо .keyup () прекращает ввод после достижения длины. Вот пример в jsFiddle:

http://jsfiddle.net/p43BH/1/

Обновлен, чтобы разрешить backspace.

Простой способ сделать это - установить текст в текстовой области на подстроку полной суммы. Вы можете найти пример здесь:

http://www.mediacollege.com/internet/javascript/form/limit-characters.html