input文本框不可编辑的3种方法

来源:互联网 发布:淘宝1元秒杀是真的吗 编辑:程序博客网 时间:2024/06/07 07:17

input文本框不可编辑的3种方法

1.disabled

disabled属性规定应该禁用 input元素。

被禁用的 input 元素既不可用,也不可点击。可以设置disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过JavaScript 来删除disabled 值,将input 元素的值切换为可用。

注释:disabled 属性无法与<input type="hidden"> 一起使用

2.readonly

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用JavaScript 消除readonly 值,将输入字段切换到可编辑状态。

readonly 属性可与 <input type="text"><input type="password">配合使用。

3.unselectable

readonly unselectable="on" 该属性跟disable类似,input元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。示例:<input type="text"  readonly  unselectable="on" >

注意:

IE下给DIV设置unselectableonselectstart属性,可以让div的内容不能选中但是有bug

<div>普通DIV<div>  

<div unselectable="on" onselectstart="return false;">从前面一个DIV开始选,就可以选中本部分内容,只有从该DIV结束部分才能不选中</div>  

要么在body里用onselectstart="return false;",但是那会导致整个页面都无法选中;或者在所有div或者类似DIV的容器里都要设置onselectstart="return false;",才能彻底解决。

Firefox下的解决方案: 

style="-moz-user-select:none;" 

Chrome下的解决方案:

style="-webkit-user-select:none;"


阅读全文
0 0