4

我为 mootools 编写了一个小插件，以便将时间选择器附加到输入字段。

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

http://jsfiddle.net/SDBCe/

//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();
        }
    }
});

我应该如何调整我的事件，这样只需使用下拉列表上的滚动条就不会模糊我的输入？

4

1 回答 1

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/

于 2012-09-27T18:58:06.683 回答