在电脑上模拟是看不出任何问题的，在真机测试就能看到了，出现在底部这样体验很不好。如下图
网上查了一些方法两种我这里测试是有用的 ：
方法1：
<input type="text" value="橘子咖啡不加糖" onfocus="this.blur()" readonly/>
这个很好理解就是进入的时候自动跳出。但是缺点是一方面js处理没有css好，二是如果需要在该元素上绑定其他事件，其他人开发不留意可能会造成事件覆盖。
方法2：
[readonly=”readonly”] {
pointer-events: none;
}
弊端是绑定在只读表单元素的所有事件将无法生效。