html - 谷歌浏览器：选择元素内容在模糊后仍然可见

Question

我有一个表单，其中包含一个<select>包含根据另一个字段值更改的选项的元素。

因此，<select>如果未设置其他字段值，则当项目获得焦点时，会在前一个触发模糊事件，并在后者触发焦点。

这是我的代码的简化版本：

$(document).on('focus', '#requiresOuterValue', 
function() {
    if( isNaN(parseInt( $('#outerValue').val() )) )
    {
        $('#outerValue').trigger('focus');
    }
});

代码在 Firefox 中工作正常（下拉内容消失，#outerValue 获得焦点），但在 chrome 中却不行，其中 #outerValue 获得焦点，但<select>项目内容也会显示。

Answer 1

嗯..您是否尝试使用本机“焦点”方法而不是“焦点”jquery 事件？

$('#outerValue')[0].focus();

我不确定触发 jQuery 事件是否具有隐式浏览器本机行为。

Answer 2

好吧，我想出了一个解决方案。

您的问题是 a 的关闭select在所有浏览器中都不是标准的。我发现模拟闭包的唯一方法是重新渲染select.

这是代码：

$(document).on('focus', '#requiresOuterValue', function() {
        var requiresOuterValue = $("#requiresOuterValue").clone();

        if( isNaN(parseInt( $('#outerValue').val() )) )
        {
            $('#outerValue').trigger('focus');
            $("#requiresOuterValue").replaceWith(requiresOuterValue);
        }
});

编辑：在这里摆弄http://jsfiddle.net/JonnyMe/C9rKL/1/

jQuery插件实现

你甚至可以实现一个 jQuery 插件来实现这个目标：

$.fn.closeSelect = function() {
    if($(this).is("select")){
        var fakeSelect = $(this).clone();
        $(this).replaceWith(fakeSelect);
    }
};

然后以这种方式使用它：

$(document).on('focus', '#requiresOuterValue', function() {
        if( isNaN(parseInt( $('#outerValue').val() )) )
        {
            $('#outerValue').trigger('focus');
            $("#requiresOuterValue").closeSelect();
        }
});