iOS webview html5 移动端 软键盘弹起遮挡输入框

移动web聊天页面，输入框在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。

创新互联主营抚顺县网站建设的网络公司,主营网站建设方案,成都APP应用开发,抚顺县h5微信小程序开发搭建,抚顺县网站营销推广欢迎抚顺县等地区企业咨询

初次触发输入框的focus的时候，iOS 键盘默认是以英文键盘高度推上页面，但一般我们的默认输入是中文，会导致软键盘的高度变化，中文输入键盘高度高于英文，所以导致了遮挡。

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。

当键盘在切换中英输入法时，键盘高度变化仍然会引起键盘遮挡

监听输入框的 focus 、 blur 事件，当聚焦时，循环调用 input.scrollIntoViewIfNeeded 方法。

当监听到 blur 时，停止循环。

做HTML5页面时怎么判断手机软键盘是否隐藏

给输入框放在html这层，然后给html相对定位，height:100%;width:100%，再给输入框绝对定位到bottom:0;left:0;这时候输入框在键盘弹出的时候会跳到输入框的上面。

移动端html5网站，如何设置输入框键盘的“搜索”“前往”按钮 - input type

显示搜索按钮需要满足3个条件：

1.input在form标签中

2.form标签设置了action属性值

3.input设置type为search

示例如下：

form action="#"

input type="search" /

/form

这种情况下点击搜索按钮会跳转到action对应的地址进行搜索

如果我们需要js来处理搜索逻辑，可以设置form不提交，并且监听输入框的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布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面;

rem布局的兼容性：

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

不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。

REM的计算公式

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

那么640px = 640/16 =40rem

个人建议设置为100px 方便计算

首先，给页面的html定义一个100px的

html{ font-size:100px;}/*设定基础rem*/

然后，最核心的代码就是这一段js运算了，根据页面的大小来控制基础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区块文案/p /li

li div class="box"/div p区块文案/p /li

li div class="box"/div p区块文案/p /li

li div class="box"/div p区块文案/p /li

li div class="box"/div p区块文案/p /li

/ul

/div

/div

/body

/html

html5 控制 手机端 input聚焦时 不弹出键盘？

第一种方式：不使用input,使用其他非焦点获取的标签来代替，比如div；

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

html5 +css 手机web app开发怎么调用手机键盘

这个软键盘好像必须有一个手动的事件执行才会弹出呢~

我有个雏形想法，仅供参考~（没有实践）

流程为：

在文本框外加个dom元素，然后添加个点击事件，在点击事件里面执行focus(),然后用trigger()（这是一个jq的模拟事件方法）将click模拟自执行一下，应该就相当于手动click了吧~

本文标题：html5手机键盘,h5调用手机键盘
文章网址：http://chengdu.cdxwcx.cn/article/dsgehop.html