html5手機鍵盤,h5調(diào)用手機鍵盤
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)調(diào)用 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
這種情況下點擊搜索按鈕會跳轉(zhuǎn)到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ā)怎么調(diào)用手機鍵盤
這個軟鍵盤好像必須有一個手動的事件執(zhí)行才會彈出呢~
我有個雛形想法，僅供參考~（沒有實踐）
流程為：
在文本框外加個dom元素，然后添加個點擊事件，在點擊事件里面執(zhí)行focus(),然后用trigger()（這是一個jq的模擬事件方法）將click模擬自執(zhí)行一下，應該就相當于手動click了吧~
網(wǎng)站名稱：html5手機鍵盤,h5調(diào)用手機鍵盤
URL鏈接：http://m.jiaotiyi.com/article/dsgehop.html