0

当我写东西时，我的输入字段中会动态显示一个“清除”图标。按键和焦点事件处理得很好，唯一的事情是我希望在输入字段不处于焦点模式时删除图标。问题是我在图标上有一个点击事件，所以如果我点击图标，focusout-event 就会触发。我想不通。

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

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

我整理了一个小小提琴：http: //jsfiddle.net/w9RbW/。

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

4

4 回答 4

1

看到这个 http://jsfiddle.net/w9RbW/8/

如果您只想在不聚焦时删除图标。

    $(".searchInput").focusout(function(e) {
  $(".keypress").css('opacity', '0');
        if(e.currentTarget != this) {
            if ($(".keypress").length > 0) {
                $(".keypress").remove();
            }
        }
    })
于 2013-01-16T16:06:23.907 回答
0

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

使用 jQuery 测试输入是否有焦点

于 2013-01-16T16:07:47.183 回答
0

作为解决方法，您可以在 icon mouseover/out 上设置/删除一些标志并在 focusout 事件中检查它。

于 2013-01-16T16:16:19.910 回答
0

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

演示：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');
  }
})
于 2013-01-16T16:16:29.727 回答