用于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上工作,我无法测试小提琴是否在IE8中表现不好,但这里是小提琴:http://jsfiddle.net/m8arw/7/

有任何解决这个问题的方法吗？

Answer 1

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

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

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