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设置unselectable与onselectstart属性,可以让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;"