Question

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

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

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

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

例如此处接受的解决方案：Clear icon inside input text 这是原始意图的一个很好的例子，但是一旦你附上了它，它也会触发模糊事件。

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

除了对表单数据不使用表单字段以及忘记不能使用HTML5的旧式浏览器这一明显的可访问性问题之外，还有什么理由不重新创建具有可信任div标签的输入字段？

Answer 1

为什么不从输入验证功能中排除这种情况（X点击），而不是试图避免模糊事件？您可以通过以下两种方式执行此操作，例如，在悬停时，您可以将var doExclude设置为true。在验证函数中，当模糊事件触发时，它可以在函数的其余部分之前首先检查它：

if (exclude) return;

完成X后，如果需要$('input').focus();

，可以将焦点返回到输入

Answer 2

这里有很多选择

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

Answer 3

一些hacky并且可能不是首选的东西，就是你在blur事件中使用setTimeout，这样你就可以延迟代码运行100ms（或者多长时间）。在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而不是{可能是安全的{1}}。

这是有效的，因为“clear”按钮的100事件将在输入的click事件后立即运行，所以如果blur事件未在100毫秒内运行，则足够安全（50）输入的click事件，未点击。

Answer 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>

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

4 个答案: