JS-DOM编程-01-文本框相关应用

最新推荐文章于 2021-08-29 00:09:08 发布

TSCCG

最新推荐文章于 2021-08-29 00:09:08 发布

阅读量177

点赞数

分类专栏： Web前端文章标签： javascript

本文链接：https://blog.csdn.net/TSCCG/article/details/119421606

版权

Web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>