Question

当我写东西时，我的输入字段中有一个“清晰”的图形动态显示。 Keypress和焦点事件处理得很好，唯一的一点就是当输入字段不在焦点模式时我想要删除图标。问题是我在图标上有一个点击事件，所以如果我点击图标，焦点事件就会触发。我无法理解。

$(".searchInput").focusout(function(e) {
    console.log(e);

    if(e.currentTarget != this) {
        if ($(".keypress").length > 0) {
            $(".keypress").remove();
        }
    }
})

我把小提琴放在一起：http://jsfiddle.net/w9RbW/。

正如您所看到的，如果输入值不为空，图标仍然存在，我不知道如何检查它是否被点击，或类似的东西......

Answer 1

请参阅此http://jsfiddle.net/w9RbW/8/

如果您只想在不清晰时删除图标。

    $(".searchInput").focusout(function(e) {
  $(".keypress").css('opacity', '0');
        if(e.currentTarget != this) {
            if ($(".keypress").length > 0) {
                $(".keypress").remove();
            }
        }
    })

Answer 2

为什么不设置一个计时器，每10秒检查一次是否清除＆＃39;图标是否存在！一旦您发现文本框失去了焦点，那么您可以删除该清除图标并停止该计时器

Using jQuery to test if an input has focus

Answer 3

作为解决方法，您可以在图标鼠标悬停/输出上设置/删除一些标记，并在焦点输出事件中检查它。

Answer 4

问题（如您所知）是当您从文本框中向外聚焦时，在触发单击事件之前，清除图标将被删除。一种可能的解决方案是改变清晰图标的不透明度而不是删除它，以便它仍然继续接收事件。

演示： http://jsfiddle.net/w9RbW/10/

// Have the clear icon in there all the time
$("<span class='keypress'><i class='icon-remove-sign'></i></span>").appendTo($(".searchInput").parent()); 

$(".keypress").click(function(e) {
  if($(this).css('opacity') == 0) return;
  $(".searchInput").val("").focus();
  $(this).css('opacity', '0'); // hide it after clearing the text
})

// focusout
$(".searchInput").blur(function(e) {
  $(".keypress").css('opacity', '0'); // hide it on blur
})

$(".searchInput").focus(function() {
  if ($(".searchInput").val() != "") {
    $(".keypress").css('opacity', '1'); // show it
  }
})

$(".searchInput").keyup(function() {
  if($(this).val() != "") {
    $(".keypress").css('opacity', '1');
  } else {
    $(".keypress").css('opacity', '0');
  }
})

如果没有点击元素，请关注焦点（参见小提琴）

4 个答案: