iOS webview html5 移動端 軟鍵盤彈起遮擋輸入框

移動web聊天頁面，輸入框在底部的時候，點擊輸入，彈起軟鍵盤，iOS在將頁面推上的時候會回彈一下，導致鍵盤剛好遮擋到輸入框。

創(chuàng)新互聯(lián)主營撫順縣網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都APP應用開發(fā),撫順縣h5微信小程序開發(fā)搭建,撫順縣網(wǎng)站營銷推廣歡迎撫順縣等地區(qū)企業(yè)咨詢

初次觸發(fā)輸入框的focus的時候，iOS 鍵盤默認是以英文鍵盤高度推上頁面，但一般我們的默認輸入是中文，會導致軟鍵盤的高度變化，中文輸入鍵盤高度高于英文，所以導致了遮擋。

Element.scrollIntoViewIfNeeded() 方法用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域。 如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi)，則不會發(fā)生滾動。 此方法是標準的 Element.scrollIntoView() 方法的專有變體。

當鍵盤在切換中英輸入法時，鍵盤高度變化仍然會引起鍵盤遮擋

監(jiān)聽輸入框的 focus 、 blur 事件，當聚焦時，循環(huán)調用 input.scrollIntoViewIfNeeded 方法。

當監(jiān)聽到 blur 時，停止循環(huán)。

做HTML5頁面時怎么判斷手機軟鍵盤是否隱藏

給輸入框放在html這層，然后給html相對定位，height:100%;width:100%，再給輸入框絕對定位到bottom:0;left:0;這時候輸入框在鍵盤彈出的時候會跳到輸入框的上面。

移動端html5網(wǎng)站，如何設置輸入框鍵盤的“搜索”“前往”按鈕 - input type

顯示搜索按鈕需要滿足3個條件：

1.input在form標簽中

2.form標簽設置了action屬性值

3.input設置type為search

示例如下：

form action="#"

input type="search" /

/form

這種情況下點擊搜索按鈕會跳轉到action對應的地址進行搜索

如果我們需要js來處理搜索邏輯，可以設置form不提交，并且監(jiān)聽輸入框的keydown事件

示例如下：

form action="#" onsubmit="return false"

input type="search" id="t_search" /

/form

script type="text/javascript"

$("#txt_search").keydown(function (e) {

if (e.keyCode == 13) {

//搜索處理

}

});

/script

還有一個前往按鈕，也類似，把type換成text就可以了，所以form很重要，如果我們不放form，就是“換行”按鈕了。

end

html5手機端，如何做到小鍵盤輸入，頁面布局不往上頂

手機頁面設計一般的大小是640，但是，手機屏幕大小確實不確定的，這樣，怎么才能做出適應所有手機的手機頁面呢？

一般的解決方案有兩種，rem布局和百分比布局。這兩種方案我有都試過，所以現(xiàn)在更推薦用rem布局來制作手機頁面;

rem布局的兼容性：

Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 還是別用rem

不過現(xiàn)在的手機一般瀏覽器，一般可以直接不用去管IE內(nèi)核的瀏覽器了。

REM的計算公式

例:html 設置font-size:16px 1rem = 16px

那么640px = 640/16 =40rem

個人建議設置為100px 方便計算

首先，給頁面的html定義一個100px的

html{ font-size:100px;}/*設定基礎rem*/

然后，最核心的代碼就是這一段js運算了，根據(jù)頁面的大小來控制基礎rem的值；

new function (){

var _self = this;

_self.width = 640;//設置默認最大寬度

_self.fontSize = 100;//默認字體大小

_self.widthProportion = function(){var p = (document.bodydocument.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p1?1:p0.5?0.5:p;};

_self.changePage = function(){

document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");

}

_self.changePage();

window.addEventListener("resize",function(){_self.changePage();},false);

};

demo

!DOCTYPE html

html

head

meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"

meta charset="utf-8"

titlerem基礎布局/title

script type="text/javascript"

new function (){

var _self = this;

_self.width = 640;//設置默認最大寬度

_self.fontSize = 100;//默認字體大小

_self.widthProportion = function(){var p = (document.bodydocument.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p1?1:p0.5?0.5:p;};

_self.changePage = function(){

document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");

}

_self.changePage();

window.addEventListener("resize",function(){_self.changePage();},false);

};

/script

style type="text/css"

/*=== base style===*/

*{margin: 0px; padding: 0px;}

ul{list-style: none;}

.wrap{min-width: 320px; max-width: 640px; width: 100%; margin: 0px auto;; background: #2a6ace; font-family:"微軟雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; font-size: 12px;}/*適用于手機端：字體大小用em，1em=16px；為默認字體大小;最大寬度640*/

.pro{width:6.2rem; margin: 0px auto; padding-top: 20px; overflow: hidden;}

.clearfix:after {content:"";height:0;display:block;clear:both;}

.clearfix {zoom:1;}

.pro ul{width:6.4rem;}

.pro li{width: 3rem; height: 3.6rem; float: left; margin: 0 0.2rem 0.2rem 0;}

.pro li .box{width: 3rem; height: 3rem; background: #ccc;}

.pro li p{font-size: 0.24rem; line-height: 0.6rem; text-align: center;}

/style

/head

body

div class="wrap"

div class="pro"

ul class="clearfix"

li div class="box"/div p區(qū)塊文案/p /li

li div class="box"/div p區(qū)塊文案/p /li

li div class="box"/div p區(qū)塊文案/p /li

li div class="box"/div p區(qū)塊文案/p /li

li div class="box"/div p區(qū)塊文案/p /li

/ul

/div

/div

/body

/html

html5 控制 手機端 input聚焦時 不彈出鍵盤？

第一種方式：不使用input,使用其他非焦點獲取的標簽來代替，比如div；

第二種方式：通過js控制，input onfocus="this.blur();"/

html5 +css 手機web app開發(fā)怎么調用手機鍵盤

這個軟鍵盤好像必須有一個手動的事件執(zhí)行才會彈出呢~

我有個雛形想法，僅供參考~（沒有實踐）

流程為：

在文本框外加個dom元素，然后添加個點擊事件，在點擊事件里面執(zhí)行focus(),然后用trigger()（這是一個jq的模擬事件方法）將click模擬自執(zhí)行一下，應該就相當于手動click了吧~

標題名稱：html5手機鍵盤,h5調用手機鍵盤
標題URL：http://chinadenli.net/article8/dsgehop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、軟件開發(fā)、電子商務、營銷型網(wǎng)站建設、Google、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)