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'); 
}

演示：Fiddle

问题是您在页面加载期间displayText()调用。在displayText中，您使用$(this)来访问输入字段，该字段用作事件处理程序。但是，当您直接致电displayText this时，会指向窗口对象。

Answer 2

尝试使用多个事件的.on（）。

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

以及“页面加载完成时”。使用$(window).load(function() { });

单词计数器Javascript函数调用

2 个答案: