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 に答える