Définir la valeur d'entrée dans jQuery

Sheeraz Gul 15 février 2024

jQuery jQuery Input

La méthode val() peut être utilisée dans jQuery pour définir la valeur d’un champ d’entrée dans jQuery. Ce tutoriel montre comment utiliser la méthode val() pour définir la valeur d’un champ de saisie dans jQuery.

Définir la valeur d’entrée dans jQuery

Le val() est une méthode intégrée à jQuery utilisée pour renvoyer ou définir la valeur d’éléments donnés. Si cette méthode renvoie la valeur, ce sera la valeur du premier élément sélectionné.

Si cette méthode est utilisée pour définir la valeur d’un élément, cette valeur peut être définie pour un ou plusieurs éléments. Cette méthode peut être utilisée de trois manières différentes.

Tout d’abord, pour renvoyer la valeur de l’élément.

Syntaxe:
```
$(selector).val()
```
Pour définir la valeur de l’élément.

Syntaxe:
```
$(selector).val("value")
```
Définissez la valeur à l’aide d’une fonction.

Syntaxe:
```
$(selector).val(function(index, CurrentValue))
```
Où Le sélecteur peut être l’identifiant, la classe ou le nom de l’élément, le value est la valeur à utiliser comme nouvelle valeur. Index et CurrentValue renvoient la position de l’index de l’élément dans l’ensemble et la valeur actuelle de l’élément sélectionné.

Prenons un exemple simple pour renvoyer la valeur d’un champ de saisie.

Exemple de code :

<!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>

Le code ci-dessus renverra la valeur du champ de saisie et l’écrira dans le paragraphe donné.

Production:

Valeur d’entrée de retour JQuery

Essayons maintenant de définir la valeur d’un champ de saisie avec la méthode val().

Exemple de code :

<!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>

Le code ci-dessus définira la valeur de l’entrée donnée sur https://www.delftstack.com/.

Production:

JQuery Définir la valeur d’entrée

Utilisons la méthode val() avec une fonction.

Exemple de code :

<!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>

Le code ci-dessus convertira la valeur du champ de saisie en majuscule.

Production:

JQuery Définir la valeur d’entrée avec la fonction

Auteur: Sheeraz Gul

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

Définir la valeur d’entrée dans jQuery

Article connexe - jQuery Input