Establecer el valor de un campo de entrada en JavaScript

A veces necesitamos establecer un valor predeterminado del elemento <input>. Este ejemplo explica los métodos para hacerlo.

Propiedad de valor de texto
Esta propiedad establece/devuelve el valor del atributo de valor de un campo de texto.
La propiedad de valor contiene el valor predeterminado, el valor que escribe un usuario o un valor establecido por un script.
Sintaxis:
- Devuelve la propiedad de valor:
```
textObject.value
```
- Establezca la propiedad de valor:
```
textObject.value = text
```
Valores de propiedad:
- texto: Especifica el valor del campo de texto de entrada.
- atributoValue: este parámetro es obligatorio. Especifica el valor del atributo a agregar.
Método setAttribute
Este método agrega el atributo especificado a un elemento y establece su valor especificado.
Si el atributo ya está presente, su valor se establece/cambia.
Sintaxis:
```
element.setAttribute(attributeName, attributeValue)
```
Parámetros:
- atributoName: este parámetro es obligatorio. Especifica el nombre del atributo a agregar.
- atributoValue: este parámetro es obligatorio. Especifica el valor del atributo a agregar.

Ejemplo-1: Este ejemplo establece el valor del elemento de entrada en ‘textValue’ mediante la propiedad Text Value .

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript 
      | Set the value of an input field.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <input type='text' id='id1' />
    <br>
    <br>
    <button onclick="gfg_Run()">
        click to set
    </button>
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px;
                            font-weight: bold;">
    </p>
    <script>
        var el_down = document.getElementById("GFG_DOWN");
        var inputF = document.getElementById("id1");
  
        function gfg_Run() {
            inputF.value = "textValue";
            el_down.innerHTML = 
                   "Value = " + "'" + inputF.value + "'";
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo-2: Este ejemplo establece el valor del elemento de entrada en ‘valor predeterminado’ mediante el método setAttribute .

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript 
      | Set the value of an input field.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <input type='text' id='id1' />
    <br>
    <br>
    <button onclick="gfg_Run()">
        click to set
    </button>
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px;
                            font-weight: bold;">
    </p>
    <script>
        var el_down = document.getElementById("GFG_DOWN");
        var inputF = document.getElementById("id1");
  
        function gfg_Run() {
            inputF.setAttribute('value', 'defaultValue');
            el_down.innerHTML = 
                   "Value = " + "'" + inputF.value + "'";
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta