Максимальное количество символов в текстовой области с помощью jquery - PullRequest
Новая
       12

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

23 голосов
/ 13 марта 2011

У меня есть следующий код, и я застрял на том, что делать дальше.Идея заключается в том, что когда вы вводите текст в текстовую область, счетчик показывает, сколько символов осталось.Как только вы доберетесь до максимального количества символов, я хочу прекратить разрешать ввод символов или удалить все введенные символы, чтобы в текстовой области оставалось только 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");
            }



        });

Ответы [ 15 ]

0 голосов
/ 12 апреля 2016 
$("#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);
});
0 голосов
/ 30 октября 2015

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

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function(){
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) {
   $(this).val($(this).val().substring(0, charLmt));
  }
});
0 голосов
/ 26 мая 2014

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

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

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

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

0 голосов
/ 28 ноября 2011

Я знаю, что это немного поздно, но я просто должен был это выяснить.Мне пришлось заставить его работать с длинами в байтах 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, up, down,Лево и право.Это не касается вставки из буфера обмена.

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

0 голосов
/ 24 марта 2011

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