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

時間 2019-11-12

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

原文原文鏈接

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

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

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

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

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