you are looking for the input event to catch everything, also pasting and other oddball input methods.

Also in your autoFill function, you need to trigger an event. That can be change, but since you’re listening to input, trigger the input event.

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>

I am trying to find a way to count the words in a Textarea in all these cases:

• Paste content ✔
• Type content ✔
• Just click inside the text area ✔
• Fill in the text area by a button click ❌

The first 3 cases I already cover, but somehow I cannot succeed with the case when you click on a button with a predefined text that is inserted into the Textarea.

This is the HTML I have

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

This is the JS I came up with

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

I thought that using keyup change click in the function will also catch the click that comes from a button. But it just catches the click within the texarea.

I have a Fiddle Demo

p.s: I am sure that there is a better and cleaner way to write the JS… I am just not very good with JS.