開發移動端web應用, 使用手機自帶鍵盤的搜索按鈕

時間 2019-11-13

標籤開發移動 web 應用使用手機自帶鍵盤搜索按鈕欄目無線简体版

原文原文鏈接

不少時候在移動端的web頁面中, 須要使用搜索功能, 然而頁面中並無太多的空間來放置一個像pc端上那樣的搜索按鈕, 這時候就須要借用手機輸入法自帶的搜索按鈕來實現點擊搜索css

雖然不是什麼大的功能, 可是確實很實用, 實現的效果有一下兩點html

1. 點擊input元素, 彈出的鍵盤右下角顯示爲 "搜索" 二字jquery

2. 點擊搜索時, 能夠出發頁面中的js事件web

 1 1 <!doctype html>
 2  2 <html lang="en">
 3  3 <head>
 4  4     <meta charset="UTF-8">
 5  5     <title>Document</title>
 6  6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 7  7     <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
 8  8 </head>
 9  9 <body>
10 10     <form id="myform" action="" onsubmit="return false;">
11 11     <input id="myinput" type="search">
12 12     </form>
13 13 </body>
14 14 <script>
15 15 //這兩種都能用, 一個是在form上加id 一個是在input元素加id
16 16 //對於蘋果手機添加一個form元素是必要的,不然只能實現功能可是鍵盤的文字不能變成搜索字樣
17 17 //  $(‘#myform‘).bind(‘search‘, function () {
18 18 //      //coding
19 19 //      alert(1);
20 20 //  });
21 21     $(‘#myinput‘).bind(‘search‘, function () {
22 22         //coding
23 23         alert(1);
24 24     });
25 25 </script>
26 26 </html>

相關標籤/搜索