Question

这可能听起来像一个菜鸟问题，但我有一个简单的功能问题，应该在页面加载时显示wordcounter 。目前我创建了一个在焦点上显示结果但我无法立即运行的结果。

有一个textarea从数据库中获取其内容，因此在加载页面时，textarea已经填满。

这是现在的代码：

var oTextArea = $('#textarea');
var oDisplay = $('#display');

  oTextArea.on('focus', function()
    {
      var words = this.value.match(/\S+/g).length;
      if (words > 1)
      {
          oDisplay.text(words);
      }
    });

https://jsfiddle.net/fischkopp/2vrLLtfr/

我在那个“解决方案”旁试了很多东西，但我没找到。

Answer 1

您正在混合使用jQuery和纯JS。使用以下内容显示加载：

var oTextArea = $('#textarea');
var oDisplay = $('#display');

oDisplay.text(oTextArea.val().match(/\S+/g).length);

Answer 2

那样的东西？

var oTextArea = $('#textarea');
var oDisplay = $('#display');

//onload
$(function() {
    countWords(); //call this function after your textarea has been filled
    oTextArea.on('focus', countWords);
    oTextArea.on('blur', countWords);
});

function countWords() {
  var words =  $('#textarea').val().match(/\S+/g).length;
  if (words > 1) {
    oDisplay.text(words);
  }
}

Answer 3

您可以使用split（）按空格分割字符串并存储到数组中，只需获取数组的长度！

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Theme Simply Me</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textarea').on('focus', function () {//Delete this line to get length on document ready
                var arr = $('#textarea').text().split(" ");
                $('#display').text(arr.length);
            });
        });//Delete
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-6">
            <textarea id="textarea" rows="20" placeholder="Enter Text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</textarea>
            <div id="display">
                Will be displayed here on focus
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

在页面加载上显示Wordcount

3 个答案: