表单中readonly的input等标签，禁止光标进入（focus）的几种方式

需求及问题描述

在作移动端页面，须要在订单页面中显示表单数据，因为UI统一，因此就依旧采用form的结构来写结构，只读数据的标签天然要加readonly=”readonly”，觉得这样就好了。
测试中Chrome模拟移动端是看不出问题的。然而iOS手机上一看，虽然表单元素不能编辑内容，可是会出现闪动的光标以及页面底部有一条系统自带的控制bar（安卓的没有测试，我猜测也有问题吧？）。以下图：

这种状况对我来讲并很差。因而网上找了一些解决方案，如今总结以下：

方案一（JS）：

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

这个很好理解就是进入的时候自动跳出。可是缺点是一方面js处理没有css好，二是若是须要在该元素上绑定其余事件，其余人开发不留意可能会形成事件覆盖。

方案二（CSS）：

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性，具体说明及兼容性可参考user-select MDN
用起来感受很好，可是一样有两个问题：一，非标准属性（请尽可能不要在生产环境中使用它！）；二，若是用户想要复制该表单内容就不行了，这个问题我的感受很严重！

方案三（CSS）：

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感受比较适合个人，所以最后我采纳了该方案，固然也是有弊端的，绑定在只读表单元素的全部事件将没法生效。除此以外都表现完美，就我目前需求来看，也不须要什么事件。所以采用了~

固然，若是你也遇到类似的问题，能够根据状况选择对应的方案，固然，若是你也有更好的方法也欢迎留言~