0

这是我的场景：

有一个简单的文本输入和两个事件：焦点输入/输出。

在焦点中，“清除”按钮将出现在文本输入上方（向右对齐）。在 Focus Out 中，“清除”按钮将被隐藏。

这两个动作只使用了 .show() / .hide() jQuery 方法。

“清除”按钮有一个点击事件，它只是将文本输入值设置为空。

问题是：当试图点击“清除”按钮时，焦点输出事件在“清除”按钮事件之前被触发，因此“清除”按钮被隐藏并且不会触发点击事件。

我已经尝试使用 .on / .live / 等附加事件（到清除按钮）。

我发现（到目前为止）唯一的解决方法是用timeOut隐藏清除按钮（它在Focus Out事件中发生），但我不确定这个解决方案有多可靠。

提前致谢！:)

4

2 回答 2

0

我必须使用它来确定，但你不能将按钮的宽度（和填充/边框/边距）设置为 0 而不是隐藏它吗？这样它仍然在页面上，我认为点击事件会通过它。

编辑：不，等等，我刚刚意识到这行不通。当您按下鼠标按钮时，文本框会失去焦点，并且在您释放鼠标按钮之前不会触发 click 事件。

于 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 回答