javascript - 字计数器 Javascript 函数调用

Question

希望在网站上的输入文本框旁边有一个单词计数器

当用户单击或修改文本时，它可以显示计数，但我想在页面完成加载后立即加载。

$(document).ready(function() {

  $("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($(this).val().length +' chars'); 
}
});

所以我尝试了下面的代码，但无法让它工作，也不知道为什么。

$(document).ready(function() {

    if($("#product_name").length){
           displayText();
    }
  $("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($(this).val().length +' chars'); 
}
});

非常感谢。

Answer 1

尝试这个

if($("#product_name").length){
           displayText();
}
$("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($("#product_name").val().length +' chars'); 
}

演示：小提琴

问题是您displayText()在页面加载期间的呼叫。displayText您曾经$(this)访问过输入字段，该字段用作事件处理程序。但是当你displayText直接调用时this会指向window对象。

Answer 2

尝试 .on() 与多个事件。

$("#product_name").on({
    change: function() {
        // Handle change event
    },
    keyup: function() {
        // Handle keyup
    }
});

和“当页面完成加载时”。利用$(window).load(function() { });