Textarea 点击字数统计 |改变 | keuyup 以及通过单击按钮填充文本区域时

Question

在所有这些情况下，我都试图找到一种方法来计算 Textarea 中的单词数：

• 粘贴内容✔
• 输入内容✔
• 只需在文本区域内单击 ✔
• 点击按钮填写文本区域❌

我已经介绍了前 3 个案例，但是当您单击带有插入到 Textarea 中的预定义文本的按钮时，我无法成功处理该案例。

这是我的 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 也会捕获来自按钮的点击。但它只是捕捉到 texarea 内的点击。

我有一个Fiddle Demo

p.s：我确信有更好更简洁的方式来编写 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>