Establecer valor de entrada en jQuery

Sheeraz Gul 15 febrero 2024

jQuery jQuery Input

El método val() se puede usar en jQuery para establecer el valor de un campo de entrada en jQuery. Este tutorial demuestra cómo usar el método val() para establecer el valor de un campo de entrada en jQuery.

Establecer valor de entrada en jQuery

El val() es un método incorporado en jQuery que se usa para devolver o establecer el valor de elementos dados. Si este método devuelve el valor, ese será el valor del primer elemento seleccionado.

Si este método se usa para establecer el valor de un elemento, ese valor se puede establecer para uno o más elementos. Este método se puede utilizar de tres maneras diferentes.

Primero, para devolver el valor del elemento.

Sintaxis:
```
$(selector).val()
```
Para establecer el valor del elemento.

Sintaxis:
```
$(selector).val("value")
```
Establezca el valor usando una función.

Sintaxis:
```
$(selector).val(function(index, CurrentValue))
```
Donde El selector puede ser el id, la clase o el nombre del elemento, el value es el valor que se utilizará como nuevo valor. Index y CurrentValue devuelven la posición del índice del elemento en el conjunto y el valor actual del elemento seleccionado.

Veamos un ejemplo simple para devolver el valor de un campo de entrada.

Código de ejemplo:

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

El código anterior devolverá el valor del campo de entrada y lo escribirá en el párrafo dado.

Producción:

Valor de entrada de retorno de JQuery

Ahora intentemos establecer el valor de un campo de entrada con el método val().

Código de ejemplo:

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

El código anterior establecerá el valor de la entrada dada en https://www.delftstack.com/.

Producción:

JQuery Establecer valor de entrada

Usemos el método val() con una función.

Código de ejemplo:

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

El código anterior convertirá el valor del campo de entrada en mayúsculas.

Producción:

JQuery Establecer valor de entrada con función

Autor: 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

Establecer valor de entrada en jQuery

Artículo relacionado - jQuery Input