标签：target ios 键盘 scroll blank 触摸 ora 绑定 按钮
今天写完项目测试时突然发现ios系统input框获取焦点激活软键盘弹起后点击空白处软键盘怎么都不下去，最后发现原来是点击空白处input框根本就没有失去焦点的问题；然后放在android系统下测试并不存在此问题。
解决方案：手动添加程序监听input的获取与失去焦点事件，获取焦点时绑定touchend事件，当touchend事件触点在空白处让其input框失去焦点即可
objBlurFun("input");
//如果不是当前触摸点不在input上,那么都失去焦点
function objBlurFun(sDom,time){
var time = time||300;
//判断是否为苹果
var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;
if(isIPHONE){
var obj = document.querySelectorAll(sDom);
for(var i=0;i<obj.length;i++){
objBlur(obj[i],time);
}
}
}
// 元素失去焦点隐藏iphone的软键盘
function objBlur(sdom,time){
if(sdom){
sdom.addEventListener("focus", function(){
document.addEventListener("touchend", docTouchend,false);
},false);
}else{
throw new Error("objBlur()没有找到元素");
}
var docTouchend = function(event){
if(event.target!= sdom){
setTimeout(function(){
sdom.blur();
document.removeEventListener(‘touchend‘, docTouchend,false);
},time);
}
};
}
移动端本来自信满满，正得意自己完美的布局时，往往却被弹起的软键盘而打乱。这次项目中遇见fixed定位的返回主页按钮在软键盘升起时因可视界面被压缩导致fixed定位的元素布局错乱
解决方案：因软键盘从下方弹起，所以我们可以把fixed定位的元素相对顶部定位就可以避免此问题了
规范中规定如果元素的transform值不为none，则该元素会生成包含块和层叠上下文，使其fixed定位、absolute定位元素和层叠上下文(index)受到影响
解决方案：不要将fixed定位的元素放在拥有transform属性的元素内部
移动端当内容超出固定高度容器出滚动条时，在安卓手机下滚动条样式较粗，非常难看，在苹果手机下没有滚动条，同时滚动时有阻塞感，滑动不顺畅；
解决方案：使用第三方组件如：iscroll、mui等
标签：target ios 键盘 scroll blank 触摸 ora 绑定 按钮
原文地址：http://www.cnblogs.com/worldly1013/p/6188957.html
