1、难题来历
做h5 早已有较长一一段时间了，如今做的工作中h5比pc上的大量，以前处理pc端IE每个版本号的适配性也是伤过脑子，原认为h5的会更强，却不知道，也有更头痛的难题，当设计方案师要设计方案一个闲聊对话框，把键入框精准定位在最低部，它是再普遍但是的难题了吧，举例说明：
图中便是我非常近做的一个作用，原认为是非常简单的一个精准定位作用，可是想不到厉害的检测竟然用各种各样iphone，各种各样安卓系统，各种各样访问器（qq访问器、safari、opera等访问器），各种各样键入法（系统软件内置、搜狗搜索键入法），测出去一大堆难题，最终历经历尽艰辛，总算保证了能大概适配。
2、基本处理
1）、构造合理布局于第一次处理
//1一部分css
.header {
width: 100%;
height: 40px;
}
//2一部分
.body {
width: 100%;
overflow: auto;
}
//3一部分
.footer {
width: 100%;
height: 30px;position: fixed; bottom:0;left:0;right:0;
}
<div class="header" id="header">对话接诊</div>
<div class="body" id="body"></div>
<div class="footer" id="footer">
<input type="text" id="input">
</div>
$('.body').css('height', $(window).height() - 39);
$('#input').on('focus', function () {
setTimeout(function () {
window.scrollTo(0, 1000000);
}, 200);
});
这类合理布局方式就要正中间".body"中的內容在".body"中翻转，对全部html中的body造成了1px的翻转，这里翻转的目地是以便实行"window.scrollTo(0, 1000000);",历经检测，若body沒有造成翻转，则这一方式不是会实行的。
坚信许多人都是以 之上的方式处理input在弹出来电脑键盘情况下的难题，当电脑键盘弹出来来后，就要翻转条一直向下面滚直至翻转到最下边，没有错，这类对策以后能确保大部分分的一切正常，可是在safari访问器中就出現了难题，因为safari访问器下边有一块
图上是safari访问器内置的一块标识，当应用之上翻转时，你能发觉，他尽管是翻转上来了，可是也会出現一块空白页，没有错，非常于让你的觉得是翻转上来过量，那麼这时，也会被检测打回，不是是觉得很难过无助，（safari访问器把下边那块作为了body的物品，他自身完成了一块，将我们的html內容装在了他自身完成的器皿里边）
2）、进一步处理
历经很多的较为与检测，发了现了一个难题，safari下边的内置键入法压根无需解决，电脑键盘仍然能够一切正常弹出来与收拢。（ps：safari访问器沒有非常的分辨，因而这里分辨过度繁杂，若有更强的分辨，请留言板留言，感谢！这里往往分辨safari访问器其实不是分辨QQ访问器，是由于检测了opera访问器的展现等跟QQ访问器一样，因而这里就分辨safari访问器）
$('input').on('focus', function () { var agent = navigator.userAgent.toLowerCase();
setTimeout(function () {
if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
&& agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
&& agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1)
{
//safari访问器
} else {//别的访问器
window.scrollTo(0, 1000000);
}
}, 200);
});
3)、再度提升与处理
历经之上两步骤，原认为恰如其分的处理计划方案，能够做到非常好的适配了，但是出现意外又产生了，检测们用了搜狗搜索键入法来做检测，难题来了，iPhone手机上内置的键入法的完成是把body挤上来，搜狗搜索则是在获得focus以后，立即弹出来的一块蒙版层，这就造成了难题，这时大家的键入框被挡在了键入法以后，因而又提升了下边的分辨与解决，
$('input').on('focus', function () {
setTimeout(function () {
if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
&& agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
&& agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safari访问器
if(scope.$txtWrap.offset().top-winobj.scrollTop() > document.body.offsetHeight/2) { //表明软电脑键盘遮住网页页面
window.scrollTo(0, winobj.height() - 270);
}
} else {//别的访问器
window.scrollTo(0, 1000000);
}
}, 200);
});
3、处理
历经几回检测，看起来基本上一切正常，最终又在iphone5上边的QQ访问器选用搜狗搜索键入法又检测出了难题，它在第一次点一下当input获得到第一次focus恶性事件的情况下，window实行了scrollTo方式，第二次，他已不实行，不会太难发觉，系统软件是认为早已翻转来到正下方，因而便已不实行，那麼我又提升了一个恶性事件
$('input').on('blur', function () {
window.scrollTo(0, 0);
});
总算大获全胜，大部分处理了如今广泛访问器广州中山大学一部分搜狗搜索和内置键入法对仿真模拟fix的input精准定位难题。
小结最终处理js为：
$('input').on('focus', function () {
var agent = navigator.userAgent.toLowerCase();
setTimeout(function () {
if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
&& agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
&& agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safari访问器
if(scope.$txtWrap.offset().top-winobj.scrollTop() > document.body.offsetHeight/2) { //表明软电脑键盘遮住网页页面
window.scrollTo(0, winobj.height() - 270);
}
} else {//别的访问器
window.scrollTo(0, 1000000);
}
}, 200);
});
$('input').on('blur', function () {
var agent = navigator.userAgent.toLowerCase();
setTimeout(function () {
if (!(agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
&& agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
&& agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1)) {//非safari访问器
window.scrollTo(0, 0);
}
}, 0);
});
头等大事，一定要让body造成翻转，要不然之上方式仍然没法处理。
近期朋友又测出了我的计划方案对一些手机上的兼容问题性，因此他得出了另外一个处理计划方案，经检测早已做到了基本上全部手机上的适配，下边出示给大伙儿：
inputFocus: function (e) {
var winobj = $(window),
scope = this,
agent = navigator.userAgent.toLowerCase();
setTimeout(function () {
if (agent.indexOf('safari') != -1 && agent.indexOf('mqqbrowser') == -1
&& agent.indexOf('coast') == -1 && agent.indexOf('android') == -1
&& agent.indexOf('linux') == -1 && agent.indexOf('firefox') == -1) {//safra访问器
window.scrollTo(0, 1000000);//先翻转到最低部，再用scrollY获得当今的值，务必延迟时间 不然取得的便是1000000
setTimeout(function(){
window.scrollTo(0, window.scrollY - 45);//45清晰度 全部访问器全是那么高
}, 50)
} else {//别的访问器
window.scrollTo(0, 1000000);
// window.scrollTo(0, ++this.scrollNum);
}
}, 200);
},
它是我处理这一难题的全过程与实践活动，
到此这篇有关html5完成键入框fixed精准定位在显示屏最低部适配性的文章内容就详细介绍到这了,大量有关html5键入框fixed精准定位适配性內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！