总结：
- 一、弹出的输入法遮挡输入框的解决办法
- 二、关于ios input 获取焦点弹出键盘，键盘收回页面上滑无法还原的问题
- 三、关于日期写法的问题
其他总结陆续更新中...
（主要针对的是vue项目，其他写的差不多，都是换汤不换药。写法稍微转变下就可以。）
一、弹出的输入法遮挡输入框的解决办法
方案一:
此方案适合底部固定的输入框，手机自带浏览器能完美解决，但对于第三方输入法部分手机不行。
// 当输入框失去焦点的时候调用
<input placeholder="请输入" v-model.trim="value" @blur="onBlur"/>
methods: {
onBlur() {
setTimeout(() => {
document.body.scrollTop = document.body.scrollHeight;
},300);
}
}
方案二：
此方案目前为止没发现大的问题，目前为止算是我比较常用的。
定义一个div，高度大约320px左右，相当于输入法的高度（此处写死不直接获取输入法的高度是因为部分手机获取不到输入法高度）。当input获取焦点时，div显示占位，失去焦点时，div隐藏。
实践发现有一问题：部分手机获取焦点调出键盘后，直接点击软键盘的关闭按钮会直接关闭软键盘，但是输入框并未失去焦点。导致div未隐藏，底部一大空白。坑啊，想哭！！！！！！！！
// div写在所有节点的最底部
<template>
<div class="wrapper">
...
<input placeholder="请输入" v-model.trim="value" @click="getFocus($event)" @blur="onBlur"/>
// 占位div
<div v-if="isShowPlaceHolder" class="place-holder" style="height: 320px;"></div>
</div>
</template>
data() {
return {
isShowPlaceHolder: false
}
},
methods: {
getFocus(e) {
// 解决input在 ios手机上点击不易获取焦点的问题
e.target.focus()
// 显示
this.isShowPlaceHolder = true
},
onBlur() {
// 隐藏
this.isShowPlaceHolder = false
}
}
方案三：
适合输入框在页面的中间位置。主要思路就是获取焦点时，让input滚动到页面中间
let ele = document.getElementById('dom')
setTimeout( () => {
ele.scrollIntoView({block: "end", behavior: "smooth"});
ele.scrollIntoViewIfNeeded();
}, 200);
最终方案：
app原生开发解决，对于他们来说是一句代码的事，不过也会有不同机子，尤其是安卓的兼容问题。但是真的比起h5方便太多啦。
二、关于ios input 获取焦点弹出键盘，键盘收回页面上滑无法还原的问题
// 失去焦点时，让dom滚动到底部
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
三、关于日期写法的问题：
new Date("2019-11-29")在安卓上正常，在ios上有时会直接返回NaN。
原因：ios不支持 -连接日期，需要写成斜杠/
// 不能写成 new Date("2019-11-29 12:30:00"), ios不支持-
new Date("2019/11/29 12:30:00")
或者
new Date("2019-11-29 12:30:00".replace(/-/g, "/"));
网友评论