移動端 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;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM