3

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

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

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

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

例如这里接受的解决方案：输入文本内的清除图标 ，这是原始意图的一个很好的例子，但这也会在您附加一个时触发模糊事件。

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

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

4

4 回答 4

5

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

if (exclude) return;

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

于 2013-03-25T18:07:20.787 回答
1

这里有很多选择

  • 您可以更改触发器以验证“keyup”或检查“提交”错误
  • 使用jquery 验证插件
  • 在$('#X-icon').click(fn)您也可以清除/隐藏错误消息。所以用户不会看到错误信息。
于 2013-03-25T18:06:01.243 回答
1

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

这是一个示例，使用您发布的链接中的样式（输入文本内的清除图标）：

$(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事件没有在输入blur事件的 100 毫秒 (50) 内运行，则它没有被点击。

于 2013-03-25T18:09:09.413 回答
0

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

<!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-25T19:33:37.917 回答