H5软键盘搜索
html部分
<!-- 搜索框 --> <div class="show-search"> <label> <form action="#" id="search_form"> <div class="search-wrap"> <span class="icon-search"></span> <input type="search" name="" class="search-input" placeholder="输入演出名称"> <span class="icon-del js-del"></span> </div> </form> </label> </div> <!-- 搜索框end -->
两个重点:1.input的type="search";2.需要使用form标签包裹,且须有action属性,action地址置为空;
css部分
//rem适配
$ppr:750px/16/1rem; //搜索框 .show-search { height: 100px/$ppr; @include displayFlex(); justify-content: center; align-items: center; background-color: #fff; color: #333; .search-wrap { width: 640px/$ppr; height: 60px/$ppr; background-color: #f5f5f5; @include displayFlex(); justify-content: center; align-items: center; border-radius: 12px/$ppr; overflow: hidden; .icon-search { display: inline-block; width: 50px/$ppr; height: 100%; background: url('../images/vipcard/search.png') center no-repeat; background-size: 24px/$ppr 24px/$ppr; margin-left: 18px/$ppr; } .search-input { height: 100%; border: none; background-color: inherit; //width: 160px/$ppr; width: 100%; font-size: 24px/$ppr; &::-webkit-search-cancel-button { display: none; } } .search-txt { height: 100%; color: #b2b2b2; line-height: 60px/$ppr; font-size: 24px/$ppr; // @include displayFlex(); // justify-content: center; // align-items: center; max-width: 560px/$ppr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-del { display: inline-block; width: 50px/$ppr; height: 100%; background: url('../images/vipcard/del.png') center no-repeat; background-size: 26px/$ppr 26px/$ppr; margin-right: 20px/$ppr; } } }
js部分
$('#search_form').on('submit',function(){ console.log('搜索'); //这里添加搜索执行代码 document.activeElement.blur();//关闭软键盘 return false; })
两个重点:1.使用 document.activeElement.blur() 手动关闭软键盘;2.最后执行return false,防止form表单默认提交。
效果如图: