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只做展示用且不做任何操作那么就可以采用这个方案~

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

vue中input禁止输入中文_input禁止键盘及中文输入,但可以点击
网上找了很多,不实用,要不兼容问题,这个可以! 禁止键盘及中文输入,但又不能用readonly 而且还需兼容ie 和 ff , 为了完成这功能费了蛮大功夫,呵呵,在此记录以便日后之用:另外禁止粘贴 ο ...
input禁止键盘及中文输入
<input>禁止键盘及中文输入,但又不能用readonly 而且还需兼容ie 和 ff , 为了完成这功能费了蛮大功夫,呵呵,在此记录以便日后之用: Html代码 <!DOCT ...
ios手机端数字显示黑色和input输入时禁止滑动的解决方案
一.ios手机端数字显示黑色苹果手机会自动识别出电话号码,以提高用户的体验,但是看着就会和其他元素格格不入,如下图: 有两个解决方案: 1.在头部标签中加入 <meta name=" ...
php如何禁掉文本框输入,如何禁止input文本框输入
如何禁止input文本框输入 nput文本框用于接收用户输入的信息,我们有两种方法可以禁止input文本框,一种方法是使用readonly,另一种方法是使用disabled,但二者之间还是有区别的,请 ...
php 禁止浏览器直接访问网页_PHP禁止直接从浏览器输入地址访问PHP文件
PHP禁止直接从浏览器输入地址访问PHP文件 PHP是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,被广泛地运用.以下是小编为大家搜索整理P ...
php禁止直接访问源码,php禁止直接从浏览器输入地址访问.PHP文件-PHP源码
对于有些重要的文件我们并不希望用户可以直接输入地址进行访问了,这我们需要进行一些设置下面总结了一些php禁止直接从浏览器输入地址访问.PHP文件方法,大家看看. <script>ec(2) ...
php 监听条码枪输入,使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)...
基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求使用扫码枪扫描条码,在一个web页面监听获取扫码枪的数据, ...
微信小程序-输入框输入文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后...
问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...
管理员不让我使用计算机管理,用u盘禁用软件教你实现电脑禁止使用u盘、管理员禁止使用u盘...
对于一般人来说,U盘是很好的文件存储工具,但对于企业来说,虽然U盘同样也可以进行文件存储.资料保存.信息传递的工具,但是也非常有可能成为员工私自拷贝电脑文件的利器,毕竟现在U盘的存储空间越来越大,读写 ...

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

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

最新文章

热门文章