Question

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

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

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

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

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

Answer 1

嗯..您是否尝试使用原生'焦点'方法而不是'焦点'jquery事件？

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

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

Answer 2

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

您的问题是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();
        }
});

Google Chrome：选择元素内容在模糊后仍然可见

2 个答案:

jQuery插件实现