移动端input弹出带有搜索按钮的键盘与获取点击搜索按钮触发的事件⼀直觉着qq，等app采⽤的搜索⽅式挺⽅便的，没有搜索按钮！⼀切都是 type="search" 实现的！
欲实现⼀个⽂字搜索的功能，要求输⼊时，键盘回车按钮提⽰显⽰为“搜索”。效果如下:
注意：要实现 search ，必须设置input的type类型为search，并且被form元素包裹，form元素要有action属性。
<form action="#">
<input type="search"/>
</form>
input[type=search]还有⼀些额外的属性，⽐如
<input type="search" results="5" />  //results值为⼀个数字，表⽰最多保存⼏条搜索记录，但是测试也没看出效果input标签placeholder属性
获取搜索按钮的点击事件
$("#keyword").on('keypress',function(e) {
var keycode = e.keyCode;
var searchName = $(this).val();
if(keycode=='13') {
e.preventDefault();
//请求搜索接⼝
}
});
但type=search会有许多默认样式和⾏为，需要修饰！实现各个⼿机⼀样！
使⽤css3新增的属性来控制input[type=search]：
::-webkit-input-placeholder
::-webkit-search-cancel-button
重写边框样式
input[type=search]{
border-radius: 5px;
border: 1px solid #ebebeb;//必须对默认的border:2px inset覆盖，要不然下⾯的样式也是⽩搭
width: 98%;
height: 30px;
outline: none;
}
重写占位符样式
input[type=search]::-webkit-input-placeholder{
color: blue;
}
重写⼩×样式
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;//此处只是去掉默认的⼩×    position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{    position: absolute;
content: 'x';
left: 25%;
top: -12%;
font-size: 20px;
color: #fff;
}
sss

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。