Establecer el valor predeterminado de un campo de entrada

Preguntas JavaScript
⏰ 7 minutos de lectura

Avatar de usuario de SebastianOpperman
SebastianOpperman

¿Cómo establecería el valor predeterminado de un formulario? <input> campo de texto en JavaScript?

  • Sólo quería señalar que dependiendo de la type de su campo de entrada, podría no permite establecer su valor si es un archivo. Consulte esta pregunta: stackoverflow.com/questions/61750165/…

    – smac89

    16/09/2022 a las 22:48

Avatar de usuario de James
Jaime

Esta es una forma de hacerlo:

document.getElementById("nameofid").value = "My value";

  • Lo haré, ¿hay alguna manera de hacer que el valor sea NULL si el usuario hace clic en el campo?

    – SebastianOpperman

    30 de septiembre de 2011 a las 10:46

  • Sí, asigne un controlador de eventos al campo de entrada que borre el valor al hacer clic. Ejemplo: elem.onclick = clearField(); // eso apuntaría a una función que borra el campo al establecer el valor en nada, similar a la respuesta anterior.

    – Jaime

    30 de septiembre de 2011 a las 10:48

  • para mi no funciono ¿Lo anterior creará el atributo de valor?

    – Dchris

    22 de marzo de 2014 a las 11:44

  • Esto no parece funcionar si está intentando cambiar el valor de la etiqueta de entrada en sí. Para aclarar, si tengo un botón que debería cambiar su valor cuando se hace clic en él, parece que no puedo cambiarlo, ni por “this.parentNode.getElementByTagName(‘input’).style.display=’none ‘;” ni usando this.style.display=’none’; Además, incluso traté de usar “.style = display: none;’;” sin exito…

    – MahNas92

    05/08/2016 a las 19:00

  • Esta y otras respuestas a la pregunta anterior parecen ignorar que el por defecto se cambiará el valor. Usando .value = ... cambia el valor actual solamente. Restableciendo el formulario (con <input type="reset" /> Por ejemplo) cambiará el valor de nuevo al original. A diferencia de, setAttribute("value", ...) funciona correctamente en Firefox y Chrome. El valor predeterminado se cambia, pero el valor real solo se cambia si el usuario aún no lo ha modificado. Sin embargo, setAttribute no se recomienda debido a la compatibilidad del navegador. ¿Hay alguna otra posibilidad?

    – JojOatXGME

    14 de junio de 2017 a las 17:08

Avatar de usuario de Pepe Amoedo
Pepe Amoedo

yo suelo setAttribute():

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

  • value se debe acceder directamente usando la notación de puntos: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute solo usa set/getAttribute para tratar con el valor original. Después de cargar DOM, .value representa el valor de trabajo real del elemento.

    – Chris Baker

    15/09/2014 a las 20:06

  • @ChrisBaker Le daría +1000 a esta respuesta si pudiera. Tengo una aplicación de terceros que escanea los campos de entrada para automatizar la aplicación (mi página se muestra en un control integrado, es decir). Este es un escenario único donde los campos de entrada son consumidos por la aplicación del cliente. Los campos de entrada no se restablecieron inmediatamente después de la devolución de datos usando .value en mi función de documento listo. Cuando tenía una devolución de datos asíncrona posterior que el usuario iniciaba, reutilizaba estos valores de entrada para automatizar algo en lo que habían hecho clic anteriormente y necesitaba que la página los “olvidara”. Esta es la salsa mágica hacky que necesitaba. ¡Gracias Pepe y Chris!

    – MikeTeeVee

    16 de agosto de 2016 a las 16:22

  • Estoy usando Yii 2.0 y establecer .value = ” directamente no ejecutaría correctamente la validación del formulario en el campo. El uso de setAttribute(‘value’,’…’) se maneja correctamente. ¡gracias!

    – ekscrypto

    27 de febrero de 2017 a las 13:33

  • Tengo un problema extraño que se resolvió con setAttribute. Mi problema fue cambiar el valor de una entrada a través de una llamada de función, también cambiar las últimas entradas modificadas.

    – SAMPro

    19/04/2018 a las 21:43

  • Podría establecer el valor de una entrada modal emergente (texto) solo usando esta respuesta. .valor no funcionó para mí. Gracias

    – Ula

    23 de abril de 2018 a las 7:00

si su formulario contiene un campo de entrada como 

<input type="text" id='id1' />

entonces puede escribir el código en javascript como se indica a continuación para establecer su valor como

document.getElementById('id1').value="text to be displayed" ;

  • ¡AYUDA! Lo hago, pero el valor siempre vuelve a cambiar al original una vez que hago clic en otro campo o en cualquier botón de la página. Este es el sitio web donde lo hago (con la clase “_56AraZ”) shopee.vn/buyer/login?next=https%3A%2F%2Fshopee.vn%2F ¿Alguien puede mostrarme cómo establecer realmente el valor para automatizar el inicio de sesión en este sitio web?

    – Zui Zui

    28 de febrero de 2021 a las 0:23

Avatar de usuario de Runsis
Runsis

2023 respuesta

En lugar de usar document.getElementById() ahora puedes usar document.querySelector() para diferentes casos

más información de otra respuesta de Stack Overflow:

querySelector le permite encontrar elementos con reglas que no se pueden expresar con getElementById y getElementsByClassName

EJEMPLO:

document.querySelector('input[name="myInput"]').value="Whatever you want!";

o

let myInput = document.querySelector('input[name="myInput"]');
myInput.value="Whatever you want!";

Prueba:

document.querySelector('input[name="myInput"]').value="Whatever you want!";
<input type="text" name="myInput" id="myInput" placeholder="Your text">

Si está utilizando varios formularios, puede utilizar:

<form name="myForm">
    <input type="text" name="name" value="">
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

  • La razón por la que me gusta esta respuesta es que usa el atributo “nombre” del formulario en lugar de la ID del elemento DOM, ¿por qué agregar un campo de ID a cada una de las entradas del formulario cuando no lo necesita?

    – temblor

    12 de junio de 2018 a las 12:18

  • @tremor estuvo totalmente de acuerdo, y esta es la primera respuesta que encontré usando “nombre” y no “id”.

    – palta

    15 de marzo de 2020 a las 18:23

  • ¿Qué es más eficiente, recuperar el valor por ID de entrada o por formulario y nombre de entrada? parece que no hay muchos formularios en la página pero sí muchos elementos.

    – ocupando

    11 de marzo de 2021 a las 8:34

  • Usando su código para establecer el valor de entrada a través del elemento de formulario, no se actualiza en el html en el sitio. Cuando dirijo la entrada directamente, se actualiza.

    – Timo

    14 de mayo de 2021 a las 7:39

  • Gracias. document.getElementByName(“timer1”) no funcionó para mí, pero document.forms[‘loginform’][‘timer1’] hizo.

    – Eperbab

    20 de febrero de 2022 a las 12:47

avatar de usuario de luis_laurent
luis_laurent

Pruebe estos. 

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12

  • La razón por la que me gusta esta respuesta es que usa el atributo “nombre” del formulario en lugar de la ID del elemento DOM, ¿por qué agregar un campo de ID a cada una de las entradas del formulario cuando no lo necesita?

    – temblor

    12 de junio de 2018 a las 12:18

  • @tremor estuvo totalmente de acuerdo, y esta es la primera respuesta que encontré usando “nombre” y no “id”.

    – palta

    15 de marzo de 2020 a las 18:23

  • ¿Qué es más eficiente, recuperar el valor por ID de entrada o por formulario y nombre de entrada? parece que no hay muchos formularios en la página pero sí muchos elementos.

    – ocupando

    11 de marzo de 2021 a las 8:34

  • Usando su código para establecer el valor de entrada a través del elemento de formulario, no se actualiza en el html en el sitio. Cuando dirijo la entrada directamente, se actualiza.

    – Timo

    14 de mayo de 2021 a las 7:39

  • Gracias. document.getElementByName(“timer1”) no funcionó para mí, pero document.forms[‘loginform’][‘timer1’] hizo.

    – Eperbab

    20 de febrero de 2022 a las 12:47

Avatar de usuario de Alexander Johansen
Alejandro Johansen

La respuesta es realmente simple. 

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

O si desea evitar JavaScript por completo: puede definirlo simplemente usando HTML

<input type="text" name="name" id="txt" value="My default value">

  • Sorprendente que solo una persona aquí haya sugerido usar el value atributo …

    –Algy Taylor

    15 de enero de 2018 a las 15:12

  • @AlgyTaylor aprecia tu esfuerzo y gracias por tu maravilloso comentario

    – PHP-codificador

    20 de enero de 2018 a las 12:34

¿Ha sido útil esta solución?