基于字符串长度的 JQuery 函数失火

Question

当输入内容包含 3 个或更多字符且不等于占位符时，以下函数应显示一个面板。

$('#search').keydown(function(){
            $('#header .suggestion').removeClass('visible');
            var slength = $(this).val();
            if(slength.length > 2 && slength != $(this).attr('placeholder')){
                //activate AJAX script
                $('#header .results').addClass('visible');
            }
            else {
                $('#header .results').removeClass('visible');
            }

    });

相反，直到显示 5 个字符后才会出现。为什么。

奇妙

Answer 1

keydown 和 keypress 事件在浏览器处理输入之前调用。在这些事件期间，开发人员可以添加一种方法来阻止用户输入文本。

因此，当您收听 keydown 函数时，$(this).val() 不会返回“预期”值。

图像（用户已经将注意力集中在输入字段上）：

{ } <-- Empty input field
    [X] <-- Use presses the X key
    **KEYDOWN**
    **KEYPRESS**
{X} <-- "x" appears in the text field
    **KEYUP**

要获取输入的“预期”值，您必须使用 keyup 事件而不是 keydown。