在输入框内显示/隐藏清除图标无法正常工作

Question

我已经创建了一个带有清除输入文本的图标的输入框。一开始，我将其设置为display:none。当您聚焦在输入框上时，清除图标会出现，这正是我想要的，但是当您单击清除图标时，它会消失并且不清除输入文本，只有在再次聚焦在输入框上时才会重新出现，我不想让它这么做，因为它应该只保持可见，直到您从输入框中单击出来，然后它应该隐藏...

因此，使用情况应该如下：

1. 清除图标最初应该被设置为隐藏（可以在CSS或jQuery中实现）。 2. 当您聚焦在输入框上时，清除图标应该显示。 3. 当您单击输入框外部时，清除图标应该再次隐藏。

我的脚本无法正常工作，我已经尝试了多种方法来解决，但都没有成功。

$("input")
  .focus(function() {
    $(this).attr("placeholder", "enter your email address...");
    $(".material-icons").show();
  })
  .blur(function() {
    $(".material-icons").hide();
    $(this).attr("placeholder", "input here");
    $(".clear-input").click(function() {
      $(this).prev().val("").focus();
    });
  });

html {
  box-sizing: border-box;
}

form {
  margin: 20vh;
}

.container {
  border: none;
  width: 248px;
  position: relative;
}

input {
  border: 1px solid pink;
  box-shadow: none;
  padding: 8px 100px 8px 5px;
  position: relative;
}

input:hover {
  border: 1px solid #222;
}

input:focus {
  border: 1px solid blue;
}

.material-icons {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: auto;
  font-size: 3px;
  cursor: pointer;
  color: #aaa;
  padding: 8px;
  display: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="container">
    <input class="type-here" type="text" placeholder="input here" />
    <i class="clear-input material-icons">clear</i>
  </div>
</form>

- Krys

---

将 $(".clear-input").click 移出模糊事件处理程序。 - charlietfl

@charlietfl 我应该把它放在哪里？ - Krys

在 $('input') 事件监听器之前或之后，但不要在其中。 - charlietfl

@charlietfl 我把它移到输入函数之外，但是当我点击清除图标时它仍然隐藏...你能给我提供一小段代码吗？我不确定为什么它不起作用。 - Krys

Answer 1

只需将click更改为mousedown，因为blur事件比click事件更早触发并删除click事件，并将click事件放在focus事件中。

$(document).ready(function(){
  $(".material-icons").hide();
  $("input")
  .focus(function() {
    $(this).attr("placeholder", "enter your email address...");
    $(".material-icons").show();
    $(".clear-input").mousedown(function(e) {
      e.preventDefault();
      $(this).prev().val("");
    });
  })
  .blur(function() {
    $(".material-icons").hide();
    $(this).attr("placeholder", "input here");
  });
});

html {
  box-sizing: border-box;
}

form {
  margin: 20vh;
}

.container {
  border: none;
  width: 248px;
  position: relative;
}

input {
  border: 1px solid pink;
  box-shadow: none;
  padding: 8px 100px 8px 5px;
  position: relative;
}

input:hover {
  border: 1px solid #222;
}

input:focus {
  border: 1px solid blue;
}

.material-icons {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: auto;
  font-size: 3px;
  cursor: pointer;
  color: #aaa;
  padding: 8px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="container">
    <input class="type-here" type="text" placeholder="input here" />
    <i class="clear-input material-icons">clear</i>
  </div>
</form>

- r3zaxd1

---

上面的代码究竟有什么问题？如果按下x，它会删除内容。你想让X在点击后仍然可见吗？ - r3zaxd1

初始状态下应该隐藏x，当鼠标在输入框内时保持可见，只有在点击输入框外部时才隐藏。 - Krys

我添加了preventDefault来防止在单击X时发生模糊。请检查编辑后的代码。 - r3zaxd1

那正是我所需要的。谢谢你！顺便问一句，你知道为什么display:none无法起作用来隐藏x吗？ - Krys

在它前面加上 !important，因为它也在你添加的其他 CSS 中定义了：https://fonts.googleapis.com/icon?family=Material+Icons，并且具有 inline-block 的显示值。 - r3zaxd1

Answer 2

这是一个有些不太优雅的解决方案：

$("input").focus(function() {
    $(this).attr("placeholder", "enter your email address...");
    $(".material-icons").show();
});


$('body').click(function(e){
   if ( !$(e.target).is('input') && !$(e.target).is('.material-icons') ) {
     $(".material-icons").hide();
   }
});

$('.clear-input').click(function(){
  $('input').val('')
}); 

http://jsfiddle.net/7ju9hqpt/44/

- git-e-up

---

感谢代码片段。 - Krys