您的位置：首页 > 其它

input标签中设置readonly属性后光标显示问题

2018-04-04 14:54 771 查看

IE、火狐浏览器中，在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑。但是,鼠标点击之后,这个表单元素还是有光标存在的。

以下方法可以解决这个问题：

1.设置属性 disabled="disabled"，

[code]<input type="text" id="id" style="width:250px;height:30px;" disabled="disabled"/>

在这种情况下，表单中的元素不可以被编辑，而且谷歌，IE浏览器中input框中的文本可以被选取，但是火狐浏览器中input框中的文本不可以被选取。

2.设置属性 unselectable="on"，

[code]<input type="text" id="id" style="width:250px;height:30px;" readonly="readonly" unselectable="on"/>

这种情况主要是解决IE浏览器中的光标出现问题。火狐浏览器中不支持。

3.onfocus="this.blur()"

[code]<body><input type="text" id="id" readonly="readonly" unselectable="on" onfocus="this.blur()"/></body>

<script>

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

</script>

这种情况主要是解决火狐浏览器中的光标出现问题。此方法不仅会让光标消失，而且使框中的信息变得无法获取。

上面三种方法视情况而定，希望可以帮大家的忙。

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航