在 jQuery 中设置输入值

JavaScript 2周前 6

val() 方法可以在 jQuery 中用于设置 jQuery 中输入字段的值。本教程演示如何使用 val() 方法在 jQuery 中设置输入字段的值。

在 jQuery 中设置输入值

val() 是 jQuery 中的内置方法，用于返回或设置给定元素的值。如果此方法返回值，那将是第一个选定元素的值。

如果此方法用于设置元素的值，则可以为一个或多个元素设置该值。该方法可以以三种不同的方式使用。

首先，返回元素的值。
语法：
```
$(selector).val()
```
设置元素的值。
语法：
```
$(selector).val("value")
```
使用函数设置值。
语法：
```
$(selector).val(function(index, CurrentValue))
```
其中选择器可以是元素的 id、类或名称，value 是用作新值的值。Index 和 CurrentValue 返回元素索引在集合中的位置和所选元素的当前值。

让我们有一个简单的例子来返回输入字段的值。

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> jQuery Val() Method</title>
    <style>
        p {
        color: green;
        margin: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <input type="text" placeholder="Type Something">
    <p></p>
    <script>
        $( "input" ).keyup(function() {
            var Input_Value = $( this ).val();
            $( "p" ).text( Input_Value );
        }).keyup();
   </script>
</body>
</html>

上面的代码将返回输入字段的值并将其写入给定的段落。

输出：

在 jQuery 中设置输入值

现在让我们尝试使用 val() 方法设置输入字段的值。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery val() Method</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#DemoInput").val("https://www.delftstack.com/");
        });
    </script>
</head>
<body>
    <h1> jQuery Val() Method</h1>
    <label>Enter Your Site:</label>
    <input type="text" id="DemoInput">
</body>
</html>

上面的代码会将给定输入的值设置为 https://www.delftstack.com/。

输出：

在 jQuery 中设置输入值

让我们使用带有函数的 val() 方法。

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery val() Method</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <h1> jQuery Val() Method</h1>
    <p>Type anything and it will be converted into Uppercase.</p>
    <p>Type and click outside.</p>
    <input type="text" placeholder="type anything">
    <script>
        $( "input" ).on( "blur", function() {
            $( this ).val(function( x, Input_Value ) {
                return Input_Value.toUpperCase();
            });
        });
    </script>
</body>
</html>

上面的代码会将输入字段的值转换为大写。

输出：

在 jQuery 中设置输入值