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

设置只读标签readonly="readonly",

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

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

方案一

ios浏览器和ie9已下(包括ie9)浏览器都有input设置readonly之后input还有聚焦的问题。

另一种方法就是input聚焦时马上让它失去焦点,这样可以规避光标显示了。$('input[readonly]').on('focus', function() {

$(this).trigger('blur');

});

精简后：οnfοcus="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只做展示用且不做任何操作那么就可以采用这个方案~