ограничение по количеству символов не работает в двух текстовых областях при использовании ключа

Question

У меня есть два текстовых поля и добавляется bootstrap максимальная длина предельный символ во втором текстовом поле, например:

$('input[maxlength], textarea#description').maxlength({
  alwaysShow: true,
  warningClass: "form-text text-muted mt-1", 
  limitReachedClass: "form-text text-muted mt-1",    
});

html:

<textarea id="summery" class="form-control my-5" placeholder="My textarea"></textarea>
<textarea id="description" class="form-control my-5" placeholder="My textarea" maxlength="100"></textarea>

Я связываю два текстовых поля, используя keyup, и получаю значение из первого текстового поля следующим образом:

  $(function(){
      $('#summery').on('keyup', function(e){
          $('#description').val($(this).val());
      });
  });

Теперь, в действии после ввода первого текстового поля, я вижу этот текст во второй области, но символ длины bootstrap не работает и не ограничивается второй текстовой областью. я имею в виду (мне нужно): первая текстовая область не ограничена символом, а вторая текстовая область ограничена и останавливается, когда я набираю первую текстовую область.

Демо: https://jsfiddle.net/Ly0p2tox/

Answer 1

Вы можете решить это с помощью оператора if

 $(function(){
    $('#summery').on('keyup', function(e){
        if($('#summery').val().length<=$('#description').attr("maxlength")){
            $('#description').val($(this).val());
        }
        else{
            $('#description').val($(this).val().substring(0,$('#description').attr("maxlength")));
        }

    });
});