javascript - 用于 IE8 的占位符代码导致下拉登录字段失去焦点

Question

我正在为 IE8 使用以下占位符代码，但是大约 70% 的时间当您在下拉登录字段中移动鼠标时它会失去焦点(整个下拉登录字段消失)；通过调试 - 当我删除这段代码时，问题就消失了 - 我发现问题的原因是这段代码:

编辑: 我发现它不是由任何特定的占位符代码引起的，但它是由过程的某些部分引起的，因为我尝试了 3 个单独的占位符插件并且它发生在所有 3 个其中；带走它们，没问题。

$(document).ready(function() {

    if ( !("placeholder" in document.createElement("input")) ) {
        $("input[placeholder], textarea[placeholder]").each(function() {
            var val = $(this).attr("placeholder");
            if ( this.value == "" ) {
                this.value = val;
            }
            $(this).focus(function() {
                if ( this.value == val ) {
                    this.value = "";
                }
            }).blur(function() {
                if ( $.trim(this.value) == "" ) {
                    this.value = val;
                }
            })
        });

        // Clear default placeholder values on form submit
        $('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
                if ( this.value == $(this).attr("placeholder") ) {
                    this.value = "";
                }
            });
        });
    }

});

您可以在此处查看示例:http://condorstudios.com/stuff/temp/so/header-sample.php

编辑: 不确定它是否有帮助，因为 jsfiddle 在 IE8 上不起作用，我无法测试 fiddle 在 IE8 中是否也表现不佳，但这是 fiddle :http://jsfiddle.net/m8arw/7/

有什么办法可以解决这个问题吗？

Answer 1

您是否尝试过将显示/隐藏下拉菜单的事件切换为“mouseenter”和“mouseleave”？
它在旧 IE 上比“焦点”和“模糊”事件可靠得多。此外，直接在“下拉”div 上绑定(bind)事件比在“输入”元素上更可取。

简而言之，请尝试像这样更改这部分代码。

$(function() {
    var dropdown = $('div.login div.dropdown')
        .on('mouseenter', function() {
            dropdown.css('display', 'block');
        })
        .on('mouseleave', function() {
            dropdown.removeAttr('style');
        });
});