移動端 input 輸入框實現內建鍵盤“搜尋“功能並修改X

標籤：ack   出現   his   enter   eve   radius   col   UNC   pre   

主要利用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;}

 

 

移動端 input 輸入框實現內建鍵盤“搜尋“功能並修改X