Question

我想计算第一次在屏幕上加载页面时textarea（如果有的话）内有多少个字符。然后我还想在用户添加更多字符或删除其中一些字符时显示它。

我的HTML代码：

<form>
  <div class="form-group">
    <textarea id="textBox" class="form-control" rows="10">Hello world</textarea>
    <div id="charNum"></div>
  </div>
</form>

我有这个jQuery脚本：

function countChar() {
    var len = val.value.length;
    $('#charNum').text(len+' characters');
};

$(document).ready(function(){
    countChar();
    $('#textBox').change(countChar);
    $('#textBox').keyup(countChar);
});

但它没有显示我想要的结果，我在这里做错了什么？

Answer 1

您的脚本中有2个问题

未关闭的'
您阅读textarea值的方式是错误的，使用id-selector获取textarea，然后使用.val()读取值

＆＃13;

function countChar() {
  var len = $('#textBox').val().length;
  $('#charNum').text(len + ' characters');
};

$(document).ready(function() {
  countChar();
  $('#textBox').change(countChar);
  $('#textBox').keyup(countChar);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <textarea id="textBox" class="form-control" rows="10">Hello world</textarea>
    <div id="charNum"></div>
  </div>
</form>

＆＃13;

Answer 2

这是另一个允许在countChar（）

中使用this的版本

function countChar() {
    // since only used as event handler callback reference have access to `this`
    var len = this.value.length;
    $('#charNum').text(len + ' characters');
};

$(document).ready(function () {
    // trigger event on page load to set first count
    $('#textBox').change(countChar).change();
    $('#textBox').keyup(countChar);

    /* or combine both events and trigger one of them on page load */
     $('#textBox').on('change keyup', countChar).change();

});

由于该函数仅用作事件处理程序的引用，因此它将自动公开this作为元素实例

的 DEMO

文档准备好和密钥时，从textarea计算字符数

2 个答案: