字计数器的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会指向窗口对象。

Answer 2

尝试.on（）与多个事件。

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

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