移动端注册页项目总结

1、 点击其他input框时 手机键盘不消失问题
document.activeElement // 文档中获得焦点的元素 
document.activeElement.blur() // 使获得焦点的元素 失焦 键盘收起
2、 ios加在div上的 click事件不管用，ios中div本身默认不能点击
解决方案在样式中添加属性cursor:pointer; // 建议使用


3、    ios 在滚动到最底部时候 卡住不动问题 
思路： 当滚动到底部或者顶部的时候 回滚动1像素
document.getElementById("content").onscroll = function() {
var viewH = $(this).height();
var contentH = $(this).get(0).scrollHeight;
var scrollTop = $(this).scrollTop();
//滚动到顶部加一像素
if (scrollTop <= 0) {
document.getElementById("content").scrollTo(0, scrollTop + 1);
}
//滚到底部回一像素
if (scrollTop + viewH >= contentH) {
document.getElementById("content").scrollTo(0, scrollTop - 1);
}
};


4、    ios滑动不流畅 添加css属性
css： -webkit-overflow-scrolling: touch;


5、 点出遮罩层后 后面内容还是可以滑动
position: absolute; // ！！ 遮罩隐藏时候 设置回来 position: relative; 否则一直滑不动


6、menu在底部设置 position:fixed 以后出现的当键盘弹出 fixed失效 menu会在键盘上方出现

// 判断是安卓还是ios
var u = navigator.userAgent,
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
// 安卓就监测窗口变化 对menu进行显示隐藏 
$(document).ready(function() {
var h = $(window).height();
$(window).resize(function() {
if ($(window).height() < h) {
$(".menu").hide();
}
if ($(window).height() >= h) {
$(".menu").show();
}
});
});
}
if (isIOS) {
// ios 根据失焦和获取焦点进行判断menu显示隐藏
$(".base_info input").on("focus", function() {
$(".menu").hide();
});
$(".base_info input").on("blur", function() {
$(".menu").show();
});
}
// 因为安卓没有失焦事件 所以ios用失焦和获取焦点的方法
// ios各个版本对获取焦点和失去焦点会不会触发resize支持不同 下面链接


8、    移动端input屏蔽键盘弹出时，使获取焦点的元素失焦可以做到屏蔽键盘弹出
$("form").on("focus", "input[name='sort']", function() {
document.activeElement.blur(); 
});


9、 input 被键盘遮挡 使当前获得焦点的元素 上滚动到顶部解决
window.onresize = function() { 
if (
document.activeElement.className == "i_tlp" ||
document.activeElement.className == "i_name"
) {
setTimeout(function() {
// 这个top值是获取焦点元素左上角到顶部的距离
var top = document.activeElement.getBoundingClientRect().top; 
window.scrollTo(100, top);
}, 100);
}
};