我已经创建了一个带有清除输入文本的图标的输入框。一开始,我将其设置为display:none。当您聚焦在输入框上时,清除图标会出现,这正是我想要的,但是当您单击清除图标时,它会消失并且不清除输入文本,只有在再次聚焦在输入框上时才会重新出现,我不想让它这么做,因为它应该只保持可见,直到您从输入框中单击出来,然后它应该隐藏...
因此,使用情况应该如下:
1. 清除图标最初应该被设置为隐藏(可以在CSS或jQuery中实现)。 2. 当您聚焦在输入框上时,清除图标应该显示。 3. 当您单击输入框外部时,清除图标应该再次隐藏。
我的脚本无法正常工作,我已经尝试了多种方法来解决,但都没有成功。
因此,使用情况应该如下:
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>
$(".clear-input").click
移出模糊事件处理程序。 - charlietfl$('input')
事件监听器之前或之后,但不要在其中。 - charlietfl