HTML DOM Password 对象
HTML DOM Password 对象
HTML DOM Password 对象是表示 HTML 表单中 password 输入域的 DOM 对象,提供了访问和操作密码输入域的方法和属性。
获取 Password 对象
HTML DOM Password 对象可以通过以下两种方式获取:
1. document.getElementById() 方法
使用 document.getElementById()
方法获取 input 元素的引用,并指定 type="password"
,然后可以使用 value
属性访问其值。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取 Password 对象</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
<script>
var password = document.getElementById("password");
alert(password.value);
</script>
</body>
</html>
2. form.elements[] 集合
另一种获取方式是通过 form.elements[]
集合来获取,其中的数组下标为表单元素的名称、id 或索引值。先获取表单元素,然后可以使用 value
属性访问其值。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取 Password 对象</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
<script>
var myForm = document.getElementById("myForm");
var password = myForm.elements["password"];
alert(password.value);
</script>
</body>
</html>
Password 对象属性
HTML DOM Password 对象提供了以下属性:
1. value
获取或设置 password 输入域的值。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password 对象属性 value</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password" value="123456">
</form>
<button onclick="showPassword()">显示密码</button>
<script>
function showPassword() {
var password = document.getElementById("password");
alert(password.value);
}
</script>
</body>
</html>
2. defaultValue
获取或设置 password 输入域的默认初始值。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password 对象属性 defaultValue</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password" value="123456">
</form>
<button onclick="resetPassword()">重置密码</button>
<script>
function resetPassword() {
var password = document.getElementById("password");
password.value = "";
password.defaultValue = "123456";
}
</script>
</body>
</html>
Password 对象方法
HTML DOM Password 对象提供了以下方法:
1. blur()
将焦点从 password 输入域上移开。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password 对象方法 blur</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
<button onclick="blurPassword()">移开焦点</button>
<script>
function blurPassword() {
var password = document.getElementById("password");
password.blur();
}
</script>
</body>
</html>
2. focus()
将焦点放到 password 输入域上。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password 对象方法 focus</title>
</head>
<body>
<form id="myForm">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
<button onclick="focusPassword()">设置焦点</button>
<script>
function focusPassword() {
var password = document.getElementById("password");
password.focus();
}
</script>
</body>
</html>
总结
HTML DOM Password 对象提供了访问和操作密码输入域的方法和属性,通过获取 Password 对象,可以对 password 输入域进行操作。