在页面加载时显示字数

Question

这听起来像是一个菜鸟问题，但我对一个简单的函数有疑问，应该在页面加载时显示一个字计数器。目前我创建了一个显示结果的焦点，但我无法立即得到它运行。

有一个从数据库中获取内容的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/

除此之外我尝试了很多东西 "solution" 但我没有找到一个。

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() 将字符串按 space 拆分并存储到一个数组中，只获取数组的长度！

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

在页面加载时显示字数

Display Wordcount on Page Load

jquery

load

focus