javascript - 如何在 jquery 中阻止这种限制单词的奇怪事情？

Question

点击http://jsfiddle.net/1ybzcppk/8/看看。
我可以成功地限制单词输入，但是发生了一件奇怪的事情。当你达到最大值时，第六个字仍然出现。如果我一直输入，它会一直替换最后一个词。当它到达第 5 个字时，我不希望出现任何内容。帮助，感谢。

JQuery:

$("#input").keydown(function(event) {

  var count = $('#test').text();
  var words = count.match(/\S+/g).length;
  if (words >= 5) {
    var trimmed = $('#test').text().split(/\s+/, 5).join(" ");
    // Add a space at the end to keep new typing making new words
    $('#test').text(trimmed + " ");

  }

  if (event.which == 13) {
    event.preventDefault();
    //put input value into div
    var value = $('#input').val();
    $('#test').text($('#test').html() + " " + value);

  }


});

CSS:

.test {
  display: inline-block;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test">dog</div>
<input type="text" id="input" />

Answer 1

将 enter 处理程序移至 else 部分

$("#input").keydown(function(event) {
  var count = $('#test').text();
  var words = count.match(/\S+/g).length;
  if (words >= 5) {
    var trimmed = $('#test').text().split(/\s+/, 5).join(" ");
    // Add a space at the end to keep new typing making new words
    $('#test').text(trimmed + " ");
  } else if (event.which == 13) {
    event.preventDefault();
    //put input value into div
    var value = $('#input').val();
    $('#test').text($('#test').html() + " " + value);

  }
});

.test {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test" id="test">dog</div>
<input type="text" id="input" />