javascript - 带有清晰图标的输入 - 失去焦点问题

Question

我有这样一个可清除的输入:

+-----------------+
|               x |
+-----------------+

清晰的图标是一个在:before:

中带有字体字形的span

<wrapper>
   <input>
   <icon span>
</wrapper>

输入验证在 blur 上完成(重新呈现用于验证消息和图标更改的输入 View - 这使架构保持简单)。我遇到的问题是，通过单击图标，输入会触发 blur，然后是图标 click。

你能想出一种方法来:

a) 避免触发模糊——我只能考虑放弃字体字形并使用背景图像，但我已经在那个位置使用其他字形来表示必需的、无效的等，所以这是不希望的

b) 检测模糊是由图标而不是其他原因引起的

谢谢。

编辑:这是一个想法，虽然使用 setTimeout 有点蹩脚:http://jsfiddle.net/ferahl/td5VR/

Answer 1

考虑使用 mousedown 和 mouseup 事件来设置/删除标志。 http://jsfiddle.net/td5VR/4/

var wasClicked = false;

$('input').blur(function(){
        $(".results").text(wasClicked ? "was clicked": "wasn't clicked");  
});

$('.something').mousedown(function(){
    wasClicked = true;
}).mouseup(function() {
    wasClicked = false;
});

虽然您仍然需要通过设置 tabindex="-1"来禁用键盘导航到链接。