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

Question

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



        });

Answer 1

Все эти ответы немного странные в том, что они пытаются сделать слишком много.Более простой и визуально более приятный способ (поскольку он показывает, что текст быстро обрезается) - и с меньшими странностями, чем в предыдущем примере (обратите внимание, как он перезаписывает последний ключ?), - просто сократить количество символов в 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/

Answer 2

Вот и все. Все, что выходит за пределы персонажа, будет удалено.

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

Проверьте рабочий пример на http://jsfiddle.net/JCehq/1/

Answer 3

Понял с этим:

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

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

Answer 4

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

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

Обновлено для разрешения возврата.

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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