移动端H5页面关于软键盘的一些踩坑记录

最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了：

1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带返回键，需要完整隐藏输入框；

2、手机ios或者Android微信，点击留言弹出输入框，滑动屏幕都要完整隐藏输入框；

3、IOS手机的复制按钮，点击后屏幕底部有弹框闪出；

4、手机ios或者Android微信，PC微信H5页面在页面下半部分点击复制，页面会跳转到顶部；

5、手机ios，点击留言，输入框会抖动；

6、手机ios点击留言弹出输入框后，此时点击屏幕关闭了输入框，再次点击留言按钮没有影响，直接界面卡死；

可以看到除了3、4是复制相关的，其他都是软键盘相关的，而这些还只是众多bug中有代表性的。。。开始改吧。

先看3、4的复制bug，一说到复制第一反应就是document.execCommand("Copy")，毕竟不需要任何其他组件，简单粗暴，可是在移动端ios出现了弹框瞬间闪出的bug，代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', '听说你想复制我');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
 document.body.removeChild(input);
})

在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。

对，没错，就是你，ios。。。

1、点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起

知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的，就不会拉起键盘了。

2、无法复制

这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。

修改后的代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
 input.setAttribute('readonly', 'readonly');
 input.setAttribute('value', 'hello world');
 document.body.appendChild(input);
    input.setSelectionRange(0, 9999);
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
 document.body.removeChild(input);
})

问题又来了，用了setSelectionRange这个方法，在pc端都不能复制了，然后我还是把它改成了input.select()，pc和移动端都能复制，不过ios里面的那个键盘突然闪出问题并不会因为设置了readonly而解决。而且关键是：手机ios或者Android微信，PC微信H5页面在页面下半部分点击复制，页面会跳转到顶部，所以这个execCommand方法并不好用，既然这样那我还是用个组件呗，直接就选择了clipboard.js，官网直接选择了通过属性复制，完美解决一切复制的b