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

我正在建立一个带有“清除值”按钮的表单字段 - 就像在iOS上有一个小小的“X”图标，您可以点击清除搜索字符串。输入字段清除按钮导致模糊事件 - 如何避免

我的问题是：我使用该字段的模糊事件来对输入格式进行错误检查，并且我的“X”图标实现总是触发模糊事件。我很难过：如果我把图标作为背景图像放在输入字段中，我不再有点击目标，并且如果我在字段顶部使用标准div或img，当然，模糊触发器。

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

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

UPDATE： 这似乎是最好的办法是使用错误检查功能 - 但我不喜欢它，所以我一直在寻找......原来我不知道在HTML5的contenteditable属性。

除了不使用表单数据的表单字段以及忘记不能使用HTML5的旧式浏览器的显而易见的可访问性问题之外，为什么不重新创建带有contenteditable div标签的输入字段呢？这里

来源

2013-03-25 tim

模糊火灾，因为你删除焦点，当你点击按钮，你能指望什么？ – epascarello 2013-03-25 17:55:46

如果你使用背景图片，你仍然有一个点击目标...这只是不理想的使用。您必须找出输入点击的位置，如果它位于特定边界内（“清除”按钮所在的位置），请清除文本。否则，这是一个正常的点击 – Ian 2013-03-25 17:58:29

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

if (exclude) return;

后，您可以将焦点返回到你的输入，如果你想$('input').focus();

来源

2013-03-25 18:07:20 Vexter

许多选项

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

来源

2013-03-25 18:06:01 aifarfa

一些黑客可能不喜欢的事情是，您在模糊事件中使用setTimeout，以便延迟代码运行100毫秒（或无论多长时间）。在100ms内，应该点击“清除”按钮。如果不是，那么运行正常的错误检查/格式化。如果已被点击，请清除输入的文本，不要执行正常的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事件没有在100ms内（50）输入的blur事件的运行它足够安全的假设，它不是，没有点击。

来源

2013-03-25 18:09:09 Ian

+1对于一个相当的尝试解决问题。 – tim 2013-03-25 19:14:14

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

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

来源

2013-03-25 19:33:37 tim

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

回答

相关问题