移动端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值为⼀个数字,表⽰最多保存⼏条搜索记录,但是测试也没看出效果
获取搜索按钮的点击事件
$("#keyword").on('keypress',function(e) {
var keycode = e.keyCode;
var searchName = $(this).val();
if(keycode=='13') {
e.preventDefault();
html获取input输入的数据//请求搜索接⼝
}
});
但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