描述:当用户点击禁用按钮的时候,文本框就会变为禁用状态,用户不可以进行输入,当用户点击解除禁用的时候,文本框恢复以前的状态,可以进行编辑输入。
关键字:disabled
,当disabled的值为true,或者字符串转换成boolean类型时,值为true的时候,文本框就会进入禁用状态,不可以进行编辑。
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁用文本框</title>
</head>
<body>
用户名:<input type="text" value="禁用文本框"><button>禁用</button><button>解除禁用</button>
</body>
</html>
<script>
//获取事件源和相关元素
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
//绑定事件
btn1.onclick = function () {
//书写驱程序
inp.disabled = true;
}
btn2.onclick = function () {
//书写驱动程序
inp.disabled = false;
}
</script>