移動端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();    
                    //請求搜索接口  
                      
                }  
         });  

 

但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