键盘优雅弹出与ios光标乱飘解决方案

前言

在移动开发中，会遇到这样的情况，比如说有一个输入框在最底部的时候，我们弹起输入框，输入框不会在输入键盘上。

说明白简单点就是，输入框被键盘挡住了。而且在原生中，输入框应该正好在输入键盘上，但是h5 没有这种体验,那么我们需要自己实现。

再次用图说明情况。

情况一:

键盘挡住了，输入框。

情况二:

红色代表有滚动条，输入框，没有正好卡在下面,用户体验不好,同样输入的时候不能滑动体验也不好。

开工

正确情况:

要做的其实就是两步:

第一步，动态改变可滑动的高度,就是在输入的时候可以通过滑动看到下面蓝色的部分:

第二部，需要修改滚动距离:

也就是需要滚动多少，输入框才刚好在键盘下。那这个怎么移动呢？我们该如何滚动才能完成呢？



计算滚动的距离，其实就是计算输入框移动的距离。

这个问题就简单了，分两种情况，其实就一种哈。

假如输入框在上面:

就是我们滑动块的底部到顶部的距离-输入框底部到顶部的距离

加入输入框在键盘下面：

就不画了，也是我们滑动块的底部到顶部的距离-输入框底部到顶部的距离，只不过我们得到的是负数，正好我们对应了我们滑动的方向。

好的，现在我们要做的就是实现这两步。

如何修改键盘弹起的高度？

我们只要知道键盘的高度和屏幕的高度即可。

屏幕高度，我们不需要去知道，因为需要修改样式，直接100vh-键盘高度即可。

键盘的高度如下:

window.addEventListener("keyboardWillShow", this.keyboardShowCallback);

在keyboardShowCallback有个参数是e:

public keyboardShowCallback = (e) => {

e.keyboardHeight;// 取得键盘的高度

})

在这里，因为我的滑动块是全屏的，那么我可以这样:

public keyboardShowCallback = (e) => {

//page 是我当前页面的滑动块,100vh就是屏幕高度

page.setAttribute('style', 'height:calc(100vh - ' + e.keyboardHeight + 'px) !important;z-index:150;');

})

那么如何获取当前正在输入的输入框,只要获取当前焦点的位置 document.activeElement:

var rect = document.activeElement.getBoundingClientRect();

通过getBoundingClientRect 获取到输入框各个位置到屏幕的距离:

我们需要的是输入框的底部，那么就是: rect.bottom;

那么我们计算滑动距离就是:

scrolldiv//表示可滑动的元素

var scrolldivrect = scrolldiv.getBoundingClientRect();

var addScrollTop = rect.bottom - scrolldivrect.bottom;

scrolldiv.scrollTop = scrolldiv.scrollTop + addScrollTop;

接下来就是键盘收起来的时候恢复:

// 监听键盘隐藏
window.addEventListener("keyboardWillHide", this.keyboardHideCallback);

//恢复事件
page.setAttribute('style', 'height: 100vh !important;z-index:120;');

在这里，其实就已经实现效果了，那么这时候会在一些平台上遇到一些问题。

遇到的问题

ios 光标乱飘

造成原因，是因为我们设置滑动了，在低版本如ipad mini3上会出现光标和输入框不对应。

那么这个时候，我继续输入，或者我点一下其他地方光标又正常了。

这时候给了我线索，我需要重绘这个input 就行。那么如何重新绘制呢？我们无法操作啊。但是我们知道如果改变某些样式是会触发重绘过程，具体查看标准。

code 如下:

var activeElement = document.activeElement; //取得focus的dom元素
setTimeout(function () {
if (activeElement) {
  if (activeElement.nodeName == "TEXTAREA" || activeElement.nodeName == 'INPUT') { //如果是input或textarea
	if ((Object)(activeElement).style.textShadow === '') {
	  (Object)(activeElement).style.textShadow = 'rgba(0,0,0,0) 0 0 0'; //改变某个不可见样式，触发dom重绘
	} else {
	  (Object)(activeElement).style.textShadow = '';
	}
  }
}
}, 0);

收起键盘出现白屏，在低版本上连续弹起键盘白屏无消失

这个问题得回到设计的根源上。



在我们收起键盘的时候，我们就会让红色部分为100%；

键盘收齐向下，然后红色向下，如果键盘收起速度，大于红色向下增大的速度，就会出现一点白，然后消失。

怎么解决呢？



红色部分是我们滚动的部分，蓝色是content，这时候让content设置为100%vh，这时候马上可视区域就会马上重绘。

在keyboardHideCallback 中

var num = Math.random() * 99;
ionContent.setAttribute('style', 'height: 100vh !important;z-index:' + num + '');

当然，然后要在keyboardShowCallback 中设置为100%,如何不设置回去，键盘弹起就会挡住输入框:

var num = Math.random() * 99;
ionContent.setAttribute('style', 'height: 100% !important;z-index:' + num + '');

总结

如果要兼容一些低版本，需要主动触发去让一些区域刷新，这些可以解决大部分白屏问题，或者其他疑难杂症(如光标漂移)。