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