Question

我为mootools写了一个插件，让时间选择器附加到输入字段。

它工作正常，但我注意到在Chrome中，当您单击滚动条以导航选择器列表时，输入会失去焦点。在其他浏览器中，它不会失去焦点。

//the events that close the selector during blur:
el.addEvents({
    'focus': function() {
        TimePicker.active(el);
    },
    'blur': function() {
        setTimeout( function() {
            el.fireEvent('change');
        },150);
    },
    'change': function() {
        TimePicker.validateField(el);
        TimePicker.inactive(el);
    },
    'keypress': function(evt) {
        if(evt.key == 'enter') {
            el.blur();
        }
    }
});

我应该如何调整我的事件，以便只使用下拉列表中的滚动条不会模糊我的输入？

Answer 1

在调查了其他一些拾取器之后，我意识到诀窍不是添加一个关闭模糊列表的事件，而是通过执行以下操作检查其他可能性来模拟模糊事件：

1. upon the opening of the list, add a click event to the document that
   checks to see if the click is not on in the active input, and not on
   the active list. If this is true and the click is in fact on a non-listy
   part of the document, then close it.
2. add an event to each list item in the suggest list (when the list is
   open only) that selects the value and closes the list.
3. add an keydown event to the input itself so if the user hits enter,
   it changes the value and closes the list.

可以在此处找到新版本的javascript代码：http://jsfiddle.net/SDBCe/1/

单击选择列表的滚动条时如何保留输入焦点

1 个答案: