1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 设置input输入框为只读方法详解

设置input输入框为只读方法详解

时间:2024-02-28 08:23:06

相关推荐

设置input输入框为只读方法详解

[align=center]设置input输入框为只读方法详解[/align]

[b]1.1禁用状态与启用状态[/b]

一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。一个元素可以被激活或获取焦点,则该元素处于启用状态。

[b]1.2设置input输入框为只读方法[/b]

设置文本框为只读,使用户不能修改其中的信息。

例:

<input type="text" value="中国">,使"中国"两个字不可以修改的方法详解。

[b]1.2.1鼠标放上时失去焦点[/b]

方法: οnfοcus=this.blur()

onfocus事件在对象获得焦点时触发。HTML DOM blur()方法用于从对象上移开焦点。

例:

<input type="text" value="中国" οnfοcus=this.blur()>

[b]1.2.2 HTML readonly属性[/b]

作用:

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

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

语法:

readonly="readonly";

例:

<input type="text" value="中国" readonly>

<input type="text" value="中国" readonly="readonly">

[b]1.2.3 HTML disabled属性[/b]

作用:

禁用某一个HTML元素。

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

语法:

disabled="disabled";

例:

<input type="text" value="中国" disabled>

<input type="text" value="中国" disabled="disabled">

[b]1.3 readonly和disabled属性区别详解[/b]

disabled属性:

disabled属性禁用HTML元素,禁用的元素既不可用,也不可点击。

disabled属性可在input,button,textarea等起作用。

设置disabled属性后,背景颜色变成淡灰色,绑定的事件,默认的事件,都无法执行。

可通过JS把对应的disabled属性去掉。

readonly属性:

readonly属性规定输入字段为只读,只读字段不能修改。不过,用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。

readonly属性只在可输入的元素框才有效,如input,textarea,对于radio,checkbox,select等元素无效。

设置readonly属性后,背景颜色不会改变,绑定的事件,默认的事件,都可以执行。

可通过JS把对应的readonly属性去掉,将输入字段切换到可编辑状态。

[b]1.4扩展知识之HTML DOM disabled/readOnly 属性[/b]

[b]HTML DOM disabled 属性[/b]

用法:

disabled属性可设置或返回是否禁用HTML DOM checkbox对象(checkbox对象代表一个选择框)。

语法:

checkboxObject.disabled=true|false;

例:

HTML代码:

<input type="checkbox" id="check" />

JS代码:

document.getElementById("check").disabled=true;

[b]HTML DOM readOnly属性[/b]

作用:

readOnly属性设置或返回文本域是否为只读。

语法:

textObject.readOnly=true|false;

例:

HTML代码:

<input type="text" id="text" value="Hello World!" />

JS代码:

document.getElementById("text").readOnly=true;

[b]1.5扩展知识之:disabled伪类[/b]

概述:

:disabled是CSS伪类,表示任何被禁用的元素。

语法:

input:disabled;//选择所有被禁用的输入框

[color=red]注意:会使所有被禁用的文本输入框具有浅灰色的背景。[/color]

例:

input:disabled{

border: 1px solid #DDD;

background-color: #F5F5F5;

color:#ACA899;

}

HTM

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。