移动web聊天页面，输入框在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。
创新互联主营抚顺县网站建设的网络公司,主营网站建设方案,成都APP应用开发,抚顺县h5微信小程序开发搭建,抚顺县网站营销推广欢迎抚顺县等地区企业咨询
初次触发输入框的focus的时候，iOS 键盘默认是以英文键盘高度推上页面，但一般我们的默认输入是中文，会导致软键盘的高度变化，中文输入键盘高度高于英文，所以导致了遮挡。
Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。
当键盘在切换中英输入法时，键盘高度变化仍然会引起键盘遮挡
监听输入框的 focus 、 blur 事件，当聚焦时，循环调用 input.scrollIntoViewIfNeeded 方法。
当监听到 blur 时，停止循环。
给输入框放在html这层，然后给html相对定位，height:100%;width:100%，再给输入框绝对定位到bottom:0;left:0;这时候输入框在键盘弹出的时候会跳到输入框的上面。
显示搜索按钮需要满足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
手机页面设计一般的大小是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
第一种方式：不使用input,使用其他非焦点获取的标签来代替，比如div；
第二种方式：通过js控制，input onfocus="this.blur();"/
这个软键盘好像必须有一个手动的事件执行才会弹出呢~
我有个雏形想法，仅供参考~（没有实践）
流程为：
在文本框外加个dom元素，然后添加个点击事件，在点击事件里面执行focus(),然后用trigger()（这是一个jq的模拟事件方法）将click模拟自执行一下，应该就相当于手动click了吧~