我使用HTML5
<input type="search" />
&#13;
一旦开始输入,就会出现清除按钮(&#39; x&#39;)。到目前为止,这就是我想要的。但是当焦点不再出现在输入字段上时(虽然里面仍有字符),清除按钮会被隐藏。
如何防止这种行为?
我想向用户保存必须重点关注搜索输入以清除它的额外步骤。所以&#39; x&#39;只要焦点在哪里,只要搜索输入中有超过0个字符,就应该是可见的。
答案 0 :(得分:0)
<div class="input-container">
<input class="search" type="search" />
<span class="clearinput">x</span>
<div style="clear:both;"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".search").on("focusin",function(e) {
$('.clearinput').css('opacity','1');
});
$(".search").on("focusout",function(e) {
$('.clearinput').css('opacity','0');
});
$(document).on('click','.clearinput',function(e){
$('.search').val('');
});
</script>
<style>
.input-container{max-width: 250px;position: relative;}
.search{ width: 100%;
z-index:-1;position: absolute;
padding-right: 60px;}
.clearinput{
position: absolute;z-index:6;
float: right;
cursor: pointer;
right: 10px;
height: 25px;border:1px solid red;width:25px;font-size:32px;
background-color:red;
/* display:none; */
top: 0;}
</style>
你无法隐藏焦点进出,因为当我们清除或点击十字按钮时,它会聚焦,然后无法清除搜索字段。根据你的不好造型造型造型