textarea 输入到底部，被ios键盘挡住

focus 和 blur的时候，设置textarea的height不同的值，focus的时候设置height在上半部50%之上。发现可以解决这个问题

<textarea class="input-content" v-bind:style="{height: textareaHeight + 'px'}" @focus="resizeHeight" @blur="recoveryHeight" rows="1" name="comment"  v-model.trim= "contentInput" placeholder="写下你的见解..."> </textarea>

textareaHeight: 300

resizeHeight: function () {
this.textareaHeight = 150
},
recoveryHeight: function () {
this.textareaHeight = 300
},

https://segmentfault.com/a/1190000006243816

// 输入框获取焦点, 键盘完全弹出再调整输入框位置(因ios键盘弹出不会触发resize事件, 故延时600ms)
// 选择setInterval轮询几次更好
setTimeout(() => {
// 挂载this上, 或者声明一个全局变量, 用于在失去焦点时, 要不要执行调整代码(非第三方不调整)
this.inputIsNotInView = this.notInView()

if (this.inputIsNotInView) {
// Width, Height: 分别是键盘没有弹出时window.innerWidth和window.innerHeight
// 88: 是第三方输入法比原生输入法多的那个tool bar(输入时显示带选项) 的高度, 做的不是太绝, 高度是统一的
// ios第三方输入法的tool bar 甚至 键盘也被当作可视区域了(包含在键盘弹出时的window.innerHeight)
if (Width != 750) {
let bottomAdjust = (Height - window.innerHeight - 88) + 'px'
$(this.inputBoxContainer).css('bottom', bottomAdjust)
}
else {
// 'iphone 6 6s, 需要额外减去键盘高度432(见下图), 还算有良心, 高度和原生保持一致')
let bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px'
$(this.inputBoxContainer).css('bottom', bottomAdjust)
}
}
}, 600)

另外需要注意的是

js拿不到键盘的 弹起/收起 事件;

ios上键盘 弹起/收回 不会触发window.resize事件;

android 4.4 以下, 键盘唤起时, 不仅会触发resize, 而且会触发scroll事件;

(如果有需要滑动失去焦点这个需求, 选择touchMove, 不要选择scroll)

ios之所以会遮挡输入框, 是因为, 第三方输入法的tool bar 或者 键盘也被当做可视区域了(包含在键盘弹出时的window.innerHeight)

总结

最后建议(ios已经完美解决, 此建议可酌情忽略了), 类似这种需求,尽量不要放在屏幕下50%

转场输入评论, 微博等;

弹窗到可视区域上50%区域, 3G门户;