在 jQuery 中设置输入值

Sheeraz Gul 2024年2月15日
在 jQuery 中设置输入值

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

在 jQuery 中设置输入值

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

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

  1. 首先,返回元素的值。

    语法:

    $(selector).val()
    
  2. 设置元素的值。

    语法:

    $(selector).val("value")
    
  3. 使用函数设置值。

    语法:

    $(selector).val(function(index, CurrentValue))
    

    其中选择器可以是元素的 id、类或名称,value 是用作新值的值。IndexCurrentValue 返回元素索引在集合中的位置和所选元素的当前值。

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

示例代码:

<!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 用函数设置输入值

作者: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

相关文章 - jQuery Input