表单中的readonlyinput等标签，禁止光标进入的几种方式（重点）

需求及问题描述在移动端页面，需要在订单页面显示表单数据。由于统一了UI，所以还是用form。结构写结构，只读数据的标签自然要加上readonly="readonly"，我觉得这样就好了。测试中，Chrome模拟移动端，没有问题。不过在iOS手机上，虽然不能编辑表单元素的内容，但是页面底部会有闪烁的光标和系统自带的控制条（安卓的没测试过，我猜有一个问题？）。下图：这种情况对我不利。于是在网上找了一些解决方案，现归纳如下：解决方案一（JS）：这很容易理解。进入时自动跳出。但是缺点是，一方面js处理不如css，另一方面如果这个元素还需要绑定其他事件，其他开发人员一不注意可能会造成事件覆盖。方案二（CSS）：[readonly="readonly"]{user-select:none;}这是一个新的实验性属性，详情和兼容性请参考user-selectMDN感觉很好用，不过也有两个一个问题：一、非标准属性（请尽量不要在生产环境中使用！）；二、如果用户想复制表单的内容，是行不通的。个人觉得这个问题很严重！方案三（CSS）：[readonly="readonly"]{pointer-events:none;}这个是我觉得比较适合我的，所以最终采用了这个方案。当然也有缺点，以只读形式绑定元素的所有事件都不会生效。除此之外，它表现完美，就我目前的需求而言，不需要任何事件。所以采纳~当然如果你也遇到类似的问题，可以根据情况选择相应的解决方案。当然如果你有更好的方法欢迎留言~