介绍
小编给大家分享一下html5如何实现输入框固定定位在屏幕最底部兼容性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> 1,问题由来
做编辑已经有很长一段时间了,现在做的工作类推比pc上的更多,曾经解决pc端即各个版本的兼容性也是伤透脑筋,原以为仅有的会更好,殊不知,还有更头疼的问题,当设计师要设计一个聊天窗口,把输入框定位在最底部,这是再常见不过的问题了吧,举例:
上图就是我最近做的一个功能,原以为是很简单的一个定位功能,但是没想到牛逼的测试居然用各种iphone,各种安卓,各种浏览器(qq浏览器、safari、opera等浏览器),各种输入法(系统自带,搜狗输入法),测出来一大堆问题,最后经过千辛万苦,终于做到了能大致兼容。
<强> 2,初步解决
1),结构布局于第一次解决
//1部分css
.header {
,,,宽度:,100%;
,,,身高:,40像素;
}//2部分
.body {
,,,宽度:100%;
,,,溢出:汽车;
}//3部分
.footer {
,,,宽度:,100%;
,,,身高:,30 px;位置:,固定,,底部:0;左:0;右:0;
} , & lt; div 类=癶eader", id=癶eader"祝辞会话问诊& lt;/div>
,& lt; div 类=癰ody", id=癰ody"祝辞& lt;/div>
,& lt; div 类=癴ooter", id=癴ooter"比;
,,,,,& lt; input 类型=皌ext", id=癷nput"比;
,& lt;/div> 美元(& # 39;.body& # 39;) . css(& # 39;高度# 39;,,美元(窗口).height(),安康;39);
$(& # 39;#输入# 39;)。(& # 39;关注# 39;,,function (), {
,,setTimeout (function (), {
,,,,,,,,,,,,,,,,window.scrollTo (0, 1000000);
,,,},,200);
以前,}); 这种布局方法就让中间“.body"中的内容在“.body"中滚动,对整个html中身体的产生了1 px的滚动,此处滚动的目的是为了执行“窗口。scrollTo(0, 1000000);“,经过测试,若身体没有产生滚动,则这个方法是不会执行的只
相信很多人都会以以上的方法解决输入在弹出键盘时候的问题,当键盘弹出来后,就让滚动条一直往下面滚直到滚动到最下面,没错,这种措施之后能保证大部分的正常,但是在safari浏览器中就出现了问题,由于safari浏览器下部有一块
图中是safari浏览器自带的一块标签,当使用以上滚动时,你会发现,他虽然是滚动上去了,但是也会出现一块空白,没错,相当于给你的感觉是滚动上去过多,那么此时,也会被测试打回,是不是感觉很伤心无助,(safari浏览器把下面那块当作了身体的东西,他自己实现了一块,把我们的html内容装在了他自己实现的容器里面)
2),进一步解决
经过大量的比较与测试,我发现了一个问题,safari下面的自带输入法根本不用处理,键盘依然可以正常弹出与收起。(ps: safari浏览器没有特别的判断,因此此处判断过于复杂,如有更好的判断,请留言,谢谢!此处之所以判断safari浏览器并不是判断QQ浏览器,是因为测试了歌剧浏览器的展示等跟QQ浏览器一样,因此此处就判断safari浏览器)
,美元(& # 39;输入# 39;)。(& # 39;关注# 39;,,function (), {var 才能;agent =, navigator.userAgent.toLowerCase ();
,,,setTimeout (function (), {
,,,,,,,,,,,,,,,,,if (agent.indexOf (& # 39; safari # 39;), !=, 1,,,, agent.indexOf (& # 39; mqqbrowser& # 39;),==, 1
,,,,,,,,,,,,,,,,,,,,,,,,agent.indexOf(& # 39;海岸# 39;),==,1,,,,agent.indexOf (& # 39; android # 39;),==1
,,,,,,,,,,,,,,,,,,,,,,,,agent.indexOf (& # 39; linux # 39;),==, 1,,,, agent.indexOf (& # 39; firefox # 39;),==, 1),
,,,,,,,,,,,,,,,,,,,,,,,,{
,//safari浏览器
,,,,,,,,,,,,,,,,,,,,,,,,,},else {//其他浏览器
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,window.scrollTo (0, 1000000);
,,,,,,,,,,,,,,,,,}
,,,,,,,,,,,,},,200);
以前,}); 3),再次优化与解决
经过以上几步骤,原以为完美无缺的解决方案,可以达到很好的兼容了,可是意外又发生了,测试们用了搜狗输入法来做测试,问题又来了,苹果手机自带的输入法的实现是把身体挤上,去搜狗则是在得到焦点之后,直接弹出的一块遮罩层,这就导致了问题,此时我们的输入框被挡在了输入法之后,因此又增加了下面的判断与处理,
