移動端 input 輸入框實現自帶鍵盤“搜索“功能並修改X

主要利用html5的，input[type=search]屬性來實現，此時input和type=text外觀和功能沒啥區別；

html代碼入下:

<form action="" id="myform">
<input type="search" id="input" value="" placeholder="快速搜索" results="5" />
</form>

但要實現點擊鍵盤右下角搜索，來發送請求，js代碼如下（以下代碼段記得引入jquery）：

//方法一
$("#myform").on('keypress', function(e) {
    var keycode = e.keyCode;
    var searchName = $(this).val();
　　//keycode是鍵碼，13也是電腦物理鍵盤的 enter 
    if(keycode == '13') {
    alert(2)
    e.preventDefault();
    //請求搜索接口  

    }
});
//方法二
//這兩種都能用, 一個是在form上加id 一個是在input元素加id
//對於蘋果手機添加一個form元素是必要的,否則只能實現功能但是鍵盤的文字不能變成搜索字樣
  $('#myform').bind('search', function () {
    //coding
      alert(1);
  });
    /*$('#input').bind('search', function () {
        
        alert(1);
    });*/

需要注意的是，input[type=search]，在用戶輸入時，默認情況下會自動在輸入框最右側出現一個 ‘X’，是為了方便用戶點擊清除所輸入的內容，但是這個 X 的默認樣式卻可能機型不一樣而不同，有的是默認一個藍色的X，很不美觀，

我們往往需要修改這個X或者直接去掉它，應該怎么實現呢？答案很簡單，只要一個CSS屬性即可，代碼如下：

 input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;/*此處只是去掉默認的小×*/
}

只要通過 -webkit-search-cancel-button這個屬性即可實現去除，去除后我們可以自定義樣式；

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;
}