表单加readonly 禁止聚焦

​
在电脑上模拟是看不出任何问题的，在真机测试就能看到了，出现在底部这样体验很不好。如下图

网上查了一些方法两种我这里测试是有用的 ：
方法1：

<input type="text" value="橘子咖啡不加糖" onfocus="this.blur()" readonly/>

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

方法2：

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

弊端是绑定在只读表单元素的所有事件将无法生效。

​

http://www.xfmeisha.com/