前端输入框相关的问题

最后更新： 2018-01-05

阅读次数： 次

许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

本文记录了在使用输入框 input 或使用可编辑的 div 模拟输入框时遇到的问题及解决方案。

复制到输入框的内容带有样式

问题： 在使用可编辑的 div 作为输入框时，会遇到这样的问题，就是在你把带有样式的内容粘贴到这个输入框时，会带有样式，而不是纯文本。（可以在下面实际操作一下）

我是可编辑的 div

将我复制到上面的 div 中

解决方案： 使用 Clipboard API 从粘贴事件下手，禁用 paste 事件的默认行为，然后将剪切板的数据转为纯文本后再放置到输入框。

打开浏览器的控制端，运行下面的代码，然后再试试把上面红色的文本复制粘贴到输入框。

let inputBox = document.querySelector("#input-box");

inputBox.addEventListener("paste", function(e) {
  e.preventDefault();

  let text = e.clipboardData.getData("text/plain");

  if (document.queryCommandSupported("insertHTML")) {
    document.execCommand("insertHTML", false, text);
  }
});

IOS 的虚拟键盘会遮挡页面底部输入框

问题： 最近做的项目 IM，遇到一个问题：ios 手机在虚拟键盘弹起时，会挡住底部输入框，并且出现这种情况的频率很大，而安卓几乎没出现过这种情况。

后来了解到，是因为 ios 与安卓处理 webview 的方式不太相同：为了得到显示虚拟键盘的空间，iOS 会将整个页面向上顶起（不管是哪一层），而安卓只会将输入框所在的那一层向上顶起。（层是通过 z-index 来定义的）

由于虚拟键盘在向上弹起时也需要一定的时间，而这个时间与顶起 webview 所用的时间可能会有间隔，所以会出现问题中描述的那种情况。

解决方法： 在输入框的 focus 事件触发后，使用 setTimeout 函数，延迟一定的时间后（200 毫秒），再将输入框所在的元素滚动到页面可视区域。

$("#input-area")[0].onfoucs = function() {
  setTimeout(() => {
    // 让输入框滚动到可视区域
    $("#input-area")[0].scrollIntoView(true);
  }, 200);
};