JS实现input赋值

IUOOD • 2025-01-20 14:11 • 编程

一、常规赋值方法

在JS中，我们一般使用document.getElementById()方法获取input元素，然后使用value属性进行赋值。

    <input type="text" id="myInput">

    <script>
        var input = document.getElementById("myInput");
        input.value = "Hello World";
    </script>

以上代码通过获取id为myInput的input元素，然后使用value属性将值赋为”Hello World”。

我们也可以在方法调用中直接给出值，如：

    <input type="text" id="myInput">

    <script>
        document.getElementById("myInput").value = "Hello World";
    </script>

二、通过事件触发赋值

除了直接通过JS代码赋值，我们也可以通过事件触发实现input赋值。

比如，我们给一个button添加onclick事件，在事件中通过value属性获取输入的内容，并将其赋给指定的input：

    <input type="text" id="myInput">
    <button onclick="setValue()">提交</button>

    <script>
        function setValue(){
            var input = document.getElementById("myInput");
            var value = document.getElementById("text").value;
            input.value = value;
        }
    </script>

以上代码通过给button添加onclick事件，将value属性赋值为text输入框输入的值。

三、通过函数返回值赋值

除了直接通过赋值或事件触发进行input赋值，我们还可以通过函数返回值来实现：

    <input type="text" id="myInput">

    <script>
        function getValue(){
            return "Hello World";
        }

        document.getElementById("myInput").value = getValue();
    </script>

以上代码通过定义一个返回值为”Hello World”的函数getValue()，然后将其返回值赋给id为myInput的input元素的value属性。

四、JSON对象赋值

在实际应用中，我们一般会通过JSON对象进行数据传递和赋值。例如：

    <input type="text" id="myInput">

    <script>
        var data = {
            name: "Mike",
            age: 25,
            hobby: "swimming"
        };

        document.getElementById("myInput").value = data.name;
    </script>

以上代码定义了一个包含姓名、年龄和爱好的JSON对象data，然后将其name属性的值赋给id为myInput的input元素的value属性。

五、动态赋值

除了静态赋值外，我们还可以通过JS动态生成input元素并进行赋值：

    <div id="myDiv"></div>
    <button onclick="addInput()">添加</button>

    <script>
        function addInput(){
            var input = document.createElement("input");
            input.type = "text";
            input.value = "Hello World";
            document.getElementById("myDiv").appendChild(input);
        }
    </script>

以上代码通过定义一个addInput()函数，生成一个input元素并将其赋值为”Hello World”，最后通过appendChild()方法将其添加到具有id为myDiv的div元素中。

原创文章，作者：IUOOD，如若转载，请注明出处：https://www.506064.com/n/332055.html