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

最新推荐文章于 2024-05-17 17:42:46 发布

weixin_30319097

最新推荐文章于 2024-05-17 17:42:46 发布

阅读量325

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lovelgx/articles/7846274.html

版权

一直觉着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;
}