移动端input弹出带有搜索按钮的键盘与获取点击搜索按钮触发的事件

时间：2024-04-16 21:11:09

一直觉着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();    
                    //请求搜索接口  
                      
                }  
         });

 



但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

相关文章