0

これが私のシナリオです：

単純なテキスト入力と2つのイベントがあります：フォーカスイン/アウト。

フォーカス中「クリア」ボタンがテキスト入力の上に表示されます（右揃え）。フォーカスアウトでは、「クリア」ボタンが非表示になります。

この2つのアクションは、単に.show（）/ .hide（）jQueryメソッドを使用します。

「クリア」ボタンにはクリックイベントがあり、テキスト入力値を空に設定するだけです。

問題は、「クリア」ボタンをクリックしようとすると、「クリア」ボタンイベントの前にフォーカスアウトイベントが発生するため、「クリア」ボタンが非表示になり、クリックイベントがトリガーされないことです。

.on / .live /などでイベントを（クリアボタンに）添付してみました。

私が（これまでに）見つけた唯一の回避策は、timeOutでクリアボタン（Focus Outイベントで発生）を非表示にすることですが、このソリューションがどれほど信頼できるかはわかりません。

前もって感謝します！:)

4

2 に答える 2

0

確かにそれを試してみる必要がありますが、ボタンを非表示にするのではなく、ボタンの幅（およびパディング/ボーダー/マージン）を0に設定することはできませんか？そうすれば、それはまだページ上にあり、クリックイベントがそれを通過すると思います。

編集：いいえ、待ってください、私はそれが機能しないことに気づきました。マウスボタンを押すとテキストボックスのフォーカスが失われ、マウスボタンを離すまでクリックイベントは発生しません。

于 2013-03-20T19:24:58.253 に答える
0 
var clear_button_timeout_id = null;
var clear_button = '<button class="clear">Clear</button>';

$('div').on('click', '.clear', function () {
    $(this).parent().find('input').val('');
});

$('input')
    .on('focus', function () {
        if (!$(this).parent().find('.clear').length) {
            $(this).after(clear_button);       
        }

        if (clear_button_timeout_id) {
            clearTimeout(clear_button_timeout_id);
        }
    })
    .on('blur', function () {
        var that = this;

        clear_button_timeout_id = setTimeout(function () {
            $(that).parent().find('.clear').remove();
        }, 2000)
    });

フィドル

于 2013-03-20T19:29:18.520 に答える