Textarea подсчитывать слова по клику | изменить | keuyup, а также когда текстовая область заполняется нажатием кнопки

Question

Я пытаюсь найти способ подсчета слов в текстовой области во всех этих случаях:

• Вставить содержимое ✔
• Тип содержимого ✔
• Просто щелкните внутри текстовой области ✔
• Заполните текстовую область нажатием кнопки ❌

Первые 3 случая, которые я уже охватил, но каким-то образом я не могу добиться успеха в случае, когда вы нажимаете на кнопку с предопределенным текстом, который вставляется в текстовое поле.

Это HTML У меня

<div class="form-group">
<label for="answer">Answer </label>
<span style="display: none" id="qmsg">lenght:</span> 
<span class="badge badge-danger" style="display: none" id="improve">Needs improvement</span>
<span class="badge badge-warning"  style="display: none" id="moderate">Moderate</span>
 <span class="badge badge-info"  style="display: none" id="good">Good</span>
 <span class="badge badge-success"  style="display: none" id="awesome">Awesome</span>
<textarea name="answer" id="answer" class="form-control vorspeise" rows="3" placeholder="Type your answer here"></textarea>
 <button class="btn btn-info" href="#" onClick="autoFill('Some text to be inserted in the text area'); return false;" role="button" type="button">Add as answer</button>
</div>

Это JS Я придумал

function autoFill(vorspeise) {
  $('.vorspeise').val(vorspeise);
  $('.myCheckbox').prop('checked', true)
}
$('textarea').on('keyup change click', function() {
  // count words
  var words = $(this).val().split(/\s+/).length;
  if (words < 3) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'inline';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 3 & words <= 5) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'inline';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 5 & words <= 7) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'inline';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 7) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'inline';
  } else {
    content = $(this).val();
  }
});

Я думал, что использование keyup change click в функции также поймает щелчок, который исходит от кнопки. Но он просто ловит щелчок внутри техасоны.

У меня есть Fiddle Demo

ps: я уверен, что есть лучше и более чистый способ написать JS ... я просто не очень хорош с JS.

Answer 1

вы ищете событие input , чтобы перехватить все, в том числе вставку и другие странные методы ввода.

Также в вашей функции autoFill вам нужно вызвать событие. Это может быть change, но поскольку вы слушаете input, активируйте событие input.

function autoFill(vorspeise) {
  $('.vorspeise').val(vorspeise);
  $('.vorspeise').trigger('input');
  $('.myCheckbox').prop('checked', true)
}
$('textarea').on('input', function() {
  // count words
  var words = $(this).val().split(/\s+/).length;
  if (words < 3) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'inline';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 3 & words <= 5) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'inline';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 5 & words <= 7) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'inline';
    document.getElementById('awesome').style.display = 'none';
  }
  if (words > 7) {
    document.getElementById('qmsg').style.display = 'inline';
    document.getElementById('improve').style.display = 'none';
    document.getElementById('moderate').style.display = 'none';
    document.getElementById('good').style.display = 'none';
    document.getElementById('awesome').style.display = 'inline';
  } else {
    content = $(this).val();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="answer">Answer </label>
<span style="display: none" id="qmsg">lenght:</span> 
<span class="badge badge-danger" style="display: none" id="improve">Needs improvement</span>
<span class="badge badge-warning"  style="display: none" id="moderate">Moderate</span>
 <span class="badge badge-info"  style="display: none" id="good">Good</span>
 <span class="badge badge-success"  style="display: none" id="awesome">Awesome</span>
<textarea name="answer" id="answer" class="form-control vorspeise" rows="3" placeholder="Type your answer here"></textarea>
 <button class="btn btn-info" href="#" onClick="autoFill('Some text to be inserted in the text area'); return false;" role="button" type="button">Add as answer</button>
</div>