input 不可输入，且禁止光标显示的几种方案兼容iphone5(se)

<input type="text" placeholder="请选择" readonly="readonly" unselectable="on">

设置只读标签readonly="readonly", 禁止光标显示unselectable="on" 但是这个Android机正常，ios,iphone 5(se)都还依然会出现光标

所以在网上找了些资料，现在整理下， 方案一

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

ios浏览器和ie9已下（包括ie9）浏览器都有input设置readonly之后input还有聚焦的问题。 另一种方法就是input聚焦时马上让它失去焦点,这样可以规避光标显示了。

$('input[readonly]').on('focus', function() {
    $(this).trigger('blur');
});

精简后：

onfocus="this.blur()"

这个很好理解就是input聚焦时马上让它失去焦点,这样可以规避光标显示了。但是缺点是一方面js处理没有css好，二是如果需要在该元素上绑定其他事件，其他人开发不留意可能会造成事件覆盖。

方案二（CSS）：

input[readonly="readonly"] {
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

这是个新的实验性属性，具体说明及兼容性可参考user-select MDN 用起来感觉很好，但是同样有两个问题：一，非标准属性（请尽量不要在生产环境中使用它！）；二，如果用户想要复制该表单内容就不行了，这个问题个人感觉很严重！,当然如果input只做展示用，且和picker组件一起使用就会非常完美了。

方案三（CSS）：

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

这个是也能实现类似功能，当然也是有弊端的，绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美，如果你页面中的input只做展示用且不做任何操作那么就可以采用这个方案~