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

Question

我创建了一个输入，带有一个清除输入文本的图标。

我最初将其设置为显示：无。 当您专注于输入时，会出现我想要的清除图标，但是当您单击清除图标时，它会消失并且不会清除输入文本，但是只有当您再次专注于输入时才会重新出现，这是我不想要的它这样做，因为它应该保持可见，直到你点击输入，然后它应该隐藏......

所以用例应该是：

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>

Answer 1

只需将 click 更改为 mousedown，因为 blur 比 click 事件更早触发并删除 click 事件并将 click 事件置于焦点事件中。

$(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>

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/