1

datepickerに似たウィジェットを作成していますが、(a) ユーザーが入力ボックスからタブを外したとき、または (b) ウィジェットと入力の両方の外側をクリックしたときに、ウィジェットを非表示にする方法がわかりません。

ぼかしイベントを入力ボックスにバインドするのは簡単ですが、問題は、ウィジェットをクリックしたときにトリガーされることであり、フォーカスがどの要素に変更されたかを内部から判断する信頼できる方法がないようです。ぼかしイベント。

ユーザーが入力の外側をクリックしたときにウィジェットを閉じるのも少し大雑把ですが、実行可能です:

$('body').on('click', function(e) {
    if(e.target != self.element[0] && e.target != self.clock[0] && !$.contains(self.clock[0], e.target)) {
        self.clock.hide();
    }
});

しかし、ぼかしイベントを適切に処理する方法を理解できれば、それは必要ありません (要素の外側でタブを押すことによってもトリガーされる可能性があります)。

4

1 に答える 1

1

解決策は実際には非常に単純であることがわかりました。rojoca の提案のおかげで、私はこれを思いつきました:

this.timepicker.on('mousedown', function(e) {
    return false;
});
this.element.on('blur', function(e) {
    self._parseInput();
    self._refreshInput();
    self._close();
});

イベントが最初に発生し、mousedownfalse を返すことで、ウィジェットをクリックしたときにぼかしイベントがトリガーされないようにします。それ以外の場合 (ウィジェットと入力ボックスの外側をクリックするか、タブで離す) を行うとぼかしが発生し、必要に応じてウィジェットが閉じます。

さらに、ウィジェットとの対話中にカーソルをテキストボックス内に保持するという、意図しない快適な副作用がありました。

于 2013-10-01T22:15:20.727 に答える