JS-DOM编程-01-文本框相关应用
JS-DOM编程-01-文本框相关应用
1.设置和获取文本框的value
1.1获取文本框的value
先根据文本框的id获取文本框对象，然后再访问value属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置和获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn1").onclick = function() {
//获取文本框对象
// var usernameElt = document.getElementById("username");
//获取文本框对象的value
// alert(usernameElt.value);
//合起来写
alert(document.getElementById("username").value);
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取value" id="btn1">
</body>
</html>
1.2修改文本框的value
我们还可以在获取文本框的value之后对其进行修改
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn1").onclick = function() {
//获取文本框对象
// var usernameElt = document.getElementById("username");
//获取文本框对象的value并进行修改
// alert(usernameElt.value = "abc");
//合起来写
alert(document.getElementById("username").value = "abc");
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取value" id="btn1">
2.将第一个文本框中的value赋给第二个文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将第一个文本框的value赋给第二个文本框</title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn1").onclick = function() {
// // 获取第一个文本框对象
// var usernameElt1 = document.getElementById("username1");
// //获取第二个文本框对象
// var usernameElt2 = document.getElementById("username2");
// //将第一个文本框的value赋给第二个文本框
// usernameElt2.value = usernameElt1.value;
//合起来写
document.getElementById("username2").value = document.getElementById("username1").value;
}
}
</script>
<input type="text" id="username1">
<br>
<input type="text" id="username2">
<br>
<input type="button" value = "将第一个文本框的value赋给第二个文本框" id="btn1">
</body>
</html>
3.blur失去焦点时获取文本框的value
blur是当光标从该文本框中离开时，发生的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blur-失去焦点时获取文本框的value</title>
</head>
<body>
<input type="text" id="username1" onblur="alert(this.value)"><!-- this代表的就是当前文本框对象 -->
</body>
</html>
