输入字段清除按钮导致模糊事件 - 如何避免答案

【问题标题】：input field clear button causing blur event - how to avoid输入字段清除按钮导致模糊事件 - 如何避免
【发布时间】：2013-03-25 17:45:50
【问题描述】：

我正在构建一个带有“清除值”按钮的表单字段 - 就像在 iOS 上一样，您可以点击一个小“X”图标来清除搜索字符串。

我的问题是：我使用字段的模糊事件对输入格式进行错误检查，而我对“X”图标的实现总是触发模糊事件。

我很困惑：如果我将图标作为背景图像放在输入字段中，我不再有点击目标，如果我在字段顶部使用标准 div 或 img，当然会模糊触发器。

我正在使用 jQuery，但这可能是一个通用的 CSS/javascript 问题。

例如这里接受的解决方案：Clear icon inside input text 这是原始意图的一个很好的例子，但这也会在您附加一个时触发模糊事件。

更新： 似乎最好的方法是使用错误检查功能 - 但我不喜欢它，所以我一直在寻找......结果我不知道 HTML5 中的 contenteditable 属性。

除了不使用表单字段作为表单数据的明显可访问性问题，以及忘记不能执行 HTML5 的老式浏览器之外，还有什么理由不使用 contenteditable div 标签重新创建输入字段？

【问题讨论】：

blur 触发是因为您在单击按钮时移除焦点，您期望什么？
如果你使用背景图片，你仍然有一个点击目标......它使用起来并不理想。您必须找出单击输入的位置，以及是否在特定边界内（“清除”按钮所在的位置），然后清除文本。否则，这是一次正常的点击

标签： javascript jquery css

【解决方案1】：

与其试图避免模糊事件，不如直接从输入验证功能中排除这种情况（X 点击）？有几种方法可以做到这一点，例如，在悬停时，您可以将 var doExclude 设置为 true。在你的验证函数中，当模糊事件触发时，它可以在函数的其余部分之前首先检查这个：

if (exclude) return;

X 完成后，如果需要 $('input').focus();，您可以将焦点返回到您的输入

【讨论】：

【解决方案2】：

这里有很多选择

您可以更改触发器以在“keyup”上进行验证或在“提交”上检查错误
使用jquery validate plugins
在$('#X-icon').click(fn) 中，您也可以清除/隐藏错误消息。所以用户不会看到错误信息。

【讨论】：

【解决方案3】：

有些奇怪并且可能不是首选的是，您在模糊事件中使用setTimeout，以便将代码延迟运行 100 毫秒（或多长时间）。在 100 毫秒内，应该已经点击了“清除”按钮。如果不是，则运行正常的错误检查/格式化。如果已被点击，则清除输入的文本，不要执行正常的blur 事件。

这是一个示例，使用您发布的链接 (Clear icon inside input text) 中的样式：

$(document).ready(function() {
    var clearTextTimeout;

    $("#data_field").on("blur", function () {
        var $that = $(this);
        clearTextTimeout = setTimeout(function () {
            console.log("would be error checking and formatting text");            
        }, 100);
    });

    $("#data_field_clear").on("click", function () {
        clearTimeout(clearTextTimeout);
        console.log("clearing text");
        $("#data_field").val("");
    });
});

http://jsfiddle.net/37Pxw/

观察你的浏览器控制台，你会发现错误检查/格式化只在你不点击“清除”按钮时运行。将数字减少到50而不是100可能是安全的.

这是有效的，因为“清除”按钮的 click 事件将在输入的 blur 事件之后立即运行，因此假设 click 事件没有在输入的 100 毫秒 (50) 内运行是足够安全的blur 事件，没有被点击。

【讨论】：

【解决方案4】：

我正在这样解决我的问题（我不喜欢输入标签很多）：

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(function(){

$('div[contenteditable]').on('blur', function(){
alert('d');
});
$('div[contenteditable] > img').on('click', function(){
$(this).parent().text('');
});

});
</script>
<style>
div[contenteditable] { border:1px solid #009; position:relative;}
img {position:absolute; top:2px; right:2px; cursor: pointer;}
</style>
<body>

<div contenteditable="true">default value<img src="/" width="10" height="10" /></div>

</body>
</html>

【讨论】：