天天看点

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

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

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

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

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

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

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

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

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

3.οnfοcus="this.blur()"

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

<script>

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

</script>
           

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

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

继续阅读