iosjs鍵盤搜索（ios鍵盤搜索按鈕）

本文目錄一覽：

• 1、html 中的 input，怎樣觸發 iOS 中不同類型的鍵盤
• 2、js 監聽ios鍵盤 實現自動搜索功能
• 3、input-search中ios顯示搜索按鈕
• 4、在input裡面IOS怎麼調用九宮格數字鍵盤
• 5、蘋果手機鍵盤搜索鍵是哪個

html 中的 input，怎樣觸發 iOS 中不同類型的鍵盤

html 是通過input標籤的type屬性來觸發不同的鍵盤類型的。

常用的type是text和password，即：

賬戶：input type=”text” value=”” /

密碼：input type=”password” value=”” /

觸發移動設備上的數字鍵盤搜索，就需寫成：

input type=”number” pattern=”[0-9]*”

input type=”number” value=”” /

input type=”tel” value=”” /

觸發郵件鍵盤（鍵盤上帶有「@」符號可輸入），就寫成：

input type=”email” value=”” /

需要進行內容搜索，就寫成：

input type=”search” value=”” /

以上僅僅是列舉了一些常用的，大多都得不到瀏覽器（或者App里的webview）的支持，也就不推薦使用了。

js 監聽ios鍵盤 實現自動搜索功能

主要分三個部分

第一部分：瀏覽器的按鍵事件

第二部分：兼容瀏覽器

第三部分：代碼實現和優化

第一部分：瀏覽器的按鍵事件 用js實現鍵盤記錄，要關注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應onkeydown、 onkeypress和onkeyup這三個事件句柄。一個典型的按鍵會產生所有這三種事件，依次是keydown，keypress，然後是按鍵釋放時候的keyup。

在這3種事件類型中，keydown和keyup比較底層，而keypress比較高級。這裡所謂的高級是指，當用戶按下shift + 1時，keypress是對這個按鍵事件進行解析後返回一個可列印的「!」字元，而keydown和keyup只是記錄了shift + 1這個事件。[1] 但是keypress只能針對一些可以列印出來的字元有效，而對於功能按鍵，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭頭方向等，就不會產生keypress事件，但是可以產生keydown和keyup事件。然而在FireFox中，功能按鍵是可以產生keypress事件的。 傳遞給keydown、keypress和keyup事件句柄的事件對象有一些通用的屬性。如果Alt、Ctrl或Shift和一個按鍵一起按下，這通過事件的altKey、ctrlKey和shiftKey屬性表示，這些屬性在FireFox和IE中是通用的。 第二部分：兼容瀏覽器 凡是涉及瀏覽器的js，就都要考慮瀏覽器兼容的問題。

目前常用的瀏覽器主要有基於IE和基於Mozilla兩大類。Maxthon是基於IE內核的，而FireFox和Opera是基於Mozilla內核的。 2.1 事件的初始化首先需要了解的是如何初始化該事件，基本語句如下： function keyDown(){}

document.onkeydown = keyDown;當瀏覽器讀到這個語句時，無論按下鍵盤上的哪個鍵，都將呼叫KeyDown()函數。 2.2 FireFox和Opera的實現方法 FireFox和Opera等程序實現要比IE麻煩，所以這裡先描述一下。keyDown()函數有一個隱藏的變數–一般的，我們使用字母「e」來表示這個變數。 function keyDown(e)變數e表示發生擊鍵事件，尋找是哪個鍵被按下，要使用which這個屬性： e.whiche.which將給出該鍵的索引值，把索引值轉化成該鍵的字母或數字值的方法需要用到靜態函數String.fromCharCode()，如下： String.fromCharCode(e.which)把上面的語句放在一起，我們可以在FireFox中得到被按下的是哪一個鍵： function keyDown(e) {

var keycode = e.which;

var realkey = String.fromCharCode(e.which);

alert(」按鍵碼: 」 + keycode + 」 字元: 」 + realkey);

}

document.onkeydown = keyDown; 2.3 IE的實現方法 IE的程序不需要e變數，用window.event.keyCode來代替e.which，把鍵的索引值轉化為真實鍵值方法類似：String.fromCharCode(event.keyCode)，程序如下： function keyDown() {

var keycode = event.keyCode;

var realkey = String.fromCharCode(event.keyCode);

alert(」按鍵碼: 」 + keycode + 」 字元: 」 + realkey);

}

document.onkeydown = keyDown; 2.4 判斷瀏覽器類型 上面了解了在各種瀏覽器里是如何實現獲取按鍵事件對象的方法，那麼下面需要判斷瀏覽器類型，這個方法很多，有比較方便理解的，也有很巧妙的辦法，先說一般 的方法：就是利用navigator對象的appName屬性，當然也可以用userAgent屬性，這裡用appName來實現判斷瀏覽器類型，IE和 Maxthon的appName是「Microsoft Internet Explorer」 ,而FireFox和Opera的appName是「Netscape」，所以一個功能比較簡單的代碼如下： function keyUp(e) {

if(navigator.appName == 「Microsoft Internet Explorer」)

{

var keycode = event.keyCode;

var realkey = String.fromCharCode(event.keyCode);

}else{

var keycode = e.which;

var realkey = String.fromCharCode(e.which);

}

alert(」按鍵碼: 」 + keycode + 」 字元: 」 + realkey);

}

document.onkeyup = keyUp; 比較簡潔的方法是[2]： function keyUp(e) {

var currKey=0,e=e||event;

currKey=e.keyCode||e.which||e.charCode;

var keyName = String.fromCharCode(currKey);

alert(」按鍵碼: 」 + currKey + 」 字元: 」 + keyName);

}

document.onkeyup = keyUp; 上面這種方法比較巧妙，簡單地解釋一下：

首先，e=e||event;這句代碼是為了進行瀏覽器事件對象獲取的兼容。js中這句代碼的意思是，如果在FireFox或Opera中，隱藏的變數e是存在的，那麼e||event返回e，如果在IE中，隱藏變數e是不存在，則返回event。

其次，currKey=e.keyCode||e.which||e.charCode;這句是為了兼容瀏覽器按鍵事件對象的按鍵碼屬性（詳見第三部 分），如IE中，只有keyCode屬性，而FireFox中有which和charCode屬性，Opera中有keyCode和which屬性等。 上述代碼只是兼容了瀏覽器，獲取了keyup事件對象，簡單的彈出了按鍵碼和按鍵的字元，但是問題出現了，當你按鍵時，字元鍵都是大寫的，而按shift鍵時，顯示的字元很奇怪，所以就需要優化一下代碼了。 第三部分：代碼實現和優化3.1 按鍵事件的按鍵碼和字元碼 按鍵事件的按鍵碼和字元碼缺乏瀏覽器間的可移植性，對於不同的瀏覽器和不同的案件事件，按鍵碼和字元碼的存儲方式都是不同的，按鍵事件，瀏覽器和按鍵事件對象屬性關係如下表： 如表所示： 在IE中，只有一個keyCode屬性，並且它的解釋取決於事件類型。對於keydown來說，keyCode存儲的是按鍵碼，對於 keypress事件來說，keyCode存儲的是一個字元碼。而IE中沒有which和charCode屬性，所以which和charCode屬性始終為undefined。 FireFox中keyCode始終為0，時間keydown/keyup時，charCode=0，which為按鍵碼。事件keypress時，which和charCode二者的值相同，存儲了字元碼。 在Opera中，keyCode和which二者的值始終相同，在keydown/keyup事件中，它們存儲按鍵碼，在keypress時間中，它們存儲字元碼，而charCode沒有定義，始終是undefined。 3.2 用keydown/keyup還是keypress 第一部分已經介紹了keydown/keyup和keypress的區別，有一條比較通用的規則，keydown事件對於功能按鍵來說是最有用的，而keypress事件對於可列印按鍵來說是最有用的[3]。 鍵盤記錄主要是針對於可列印字元和部分功能按鍵，所以keypress是首選，然而正如第一部分提到的，IE中keypress不支持功能按鍵，所以應該用keydown/keyup事件來進行補充。 3.3 代碼的實現

總體思路，用keypress事件對象獲取按鍵字元，用keydown事件獲取功能字元，如Enter，Backspace等。代碼實現如下所示 !DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.0 Transitional//EN」

HTML

HEADTITLEjs 按鍵記錄/TITLE

META NAME=”Generator” CONTENT=”EditPlus”

META NAME=”Author” CONTENT=””

META NAME=”Keywords” CONTENT=”js 按鍵記錄”

META NAME=”Description” CONTENT=”js 按鍵記錄”

/HEAD

BODYscript type=”text/javascript”

!–

var keystring = “”;//記錄按鍵的字元串function $(s)

{

return document.getElementById(s)?document.getElementById(s):s;

}function keypress(e)

{

var currKey=0,CapsLock=0,e=e||event;

currKey=e.keyCode||e.which||e.charCode;

CapsLock=currKey=65currKey=90;

switch(currKey)

{

//屏蔽了退格、製表、回車、空格、方向鍵、刪除鍵

case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46: keyName = “”; break;

default:keyName = String.fromCharCode(currKey); break;

}

keystring += keyName;

}function keydown(e)

{

var e = e||event;

var currKey = e.keyCode||e.which||e.charCode;

if((currKey7currKey14)||(currKey31currKey47))

{

switch(currKey)

{

case 8: keyName = “[退格]”; break;

case 9: keyName = “[製表]”; break;

case 13:keyName = “[回車]”; break;

case 32:keyName = “[空格]”; break;

case 33:keyName = “[PageUp]”; break;

case 34:keyName = “[PageDown]”; break;

case 35:keyName = “[End]”; break;

case 36:keyName = “[Home]”; break;

case 37:keyName = “[方向鍵左]”; break;

case 38:keyName = “[方向鍵上]”; break;

case 39:keyName = “[方向鍵右]”; break;

case 40:keyName = “[方向鍵下]”; break;

case 46:keyName = “[刪除]”; break;

default: keyName = “”; break;

}

keystring += keyName;

}

$(“content”).innerHTML=keystring;

}function keyup(e)

{

$(“content”).innerHTML=keystring;

}document.onkeypress = keypress;

document.onkeydown = keydown;

document.onkeyup = keyup;

//–

/script input type=”text” /

input type=”button” value=”清空記錄” onclick=”$(‘content’).innerHTML=”;keystring=”;”/

br/請按下任意鍵查看鍵盤響應鍵值：span id=”content”/span

/BODY

/HTML 代碼分析：

$()：根據ID獲取dom

keypress(e)：實現對字元碼的截獲，由於功能按鍵要用keydown獲取，所以在keypress中屏蔽了這些功能按鍵。

keydown(e)：主要是實現了對功能按鍵的獲取。

keyup(e)：展示截獲的字元串。 代碼基本上就算實現完成了

input-search中ios顯示搜索按鈕

一定要用form包裹並且加上action屬性，這樣手機的鍵盤就會出現搜索按鈕。

由於input type 是 search，所以ios會自帶一個搜索icon，安卓則沒有。所以最好自己寫一個 隱藏ios的icon

去掉前

去掉後

在input裡面IOS怎麼調用九宮格數字鍵盤

html 是通過input標籤的type屬性來觸發不同的鍵盤類型的。

常用的type是text和password，即：

賬戶：input type=”text” value=”” /

密碼：input type=”password” value=”” /

觸發移動設備上的數字鍵盤搜索，就需寫成：

input type=”number” pattern=”[0-9]*”

input type=”number” value=”” /

input type=”tel” value=”” /

觸發鍵盤（鍵盤上帶有「@」符號可輸入），就寫成：

input type=”email” value=”” /

需要進行內容搜索，就寫成：

input type=”search” value=”” /

以上僅僅是列舉了一些常用的，大多都得不到瀏覽器（或者App里的webview）的支持，也就不使用了。

蘋果手機鍵盤搜索鍵是哪個

你在蘋果手機打字框中輸入「搜索」兩個字就會出來?了 。

iPhone是蘋果公司（Apple Inc. ）發布搭載iOS操作系統的系列手機。

截至2021年9月，蘋果公司（Apple Inc. ）已發布32款手機產品，初代：iPhone，最新版本：iPhone 13 mini，iPhone 13，iPhone 13 Pro， iPhone 13 Pro Max。

iPhone系列產品靜音鍵在設備正面的左側；iPhone 5之前機型使用30Pin（即30針）介面，iPhone 5（包含）之後產品使用Lightning介面。

iPhone X之前機型配置Home鍵；iPhone X（包含）之後（除iPhone SE 第二代）機型取消了實體Home鍵。

iPhone系列機型自iPhone 4之後配置Apple Silicon自研晶元。Touch ID在iPhone 5s上首次出現；iPhone 6s 和iPhone 6s Plus首次在屏幕上加入了3D Touch壓力感應觸控。

無線充電在iPhone8、iPhone 8 Plus機型首次出現，採用Qi（Chee）無線充電標準。

2007年1月9日，蘋果公司（Apple Inc. ）在美國舊金山馬士孔尼會展中心舉行的Macworld大會上發布iPhone。

2008年6月9日（北京時間6月10日），蘋果公司（Apple Inc. ）在美國舊金山發布的iPhone 3G。

2009年6月8日（北京時間2009年6月9日凌晨），蘋果公司（Apple Inc. ）在美國舊金山Moscone West會議中心舉行的WWDC2009（蘋果全球開發者大會）上發布iPhone 3GS。

2010年06月08日（北京時間），蘋果公司（Apple Inc. ）在美國舊金山發布iPhone 4。

2011年10月05日（北京時間），蘋果公司（Apple）在美國加利福尼亞州庫比提諾總部發布iPhone 4S。

2012年9月21日，蘋果公司（Apple Inc.）在美國舊金山市芳草地藝術中心發布iPhone 5。

2013年9月11日，蘋果公司（Apple Inc.）在加利福尼亞州庫比蒂諾發布iPhone 5c及iPhone 5s。

2014年9月10日，蘋果公司（Apple Inc.）在美國加州庫比提諾發布iPhone 6及iPhone 6 Plus。

2015年9月9日（北京時間9月10日），蘋果公司（Apple Inc.）在美國舊金山比爾·格拉漢姆公民大禮堂發布iPhone 6s及iPhone 6s Plus。

2016年3月21日10點（美國當地時間），蘋果公司（Apple Inc.）在美國加州庫比蒂諾總部發布iPhone SE 。