Establecer el valor de un campo de entrada

442

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

SebastianOpperman
fuente

Respuestas:

818

Esta es una forma de hacerlo:

document.getElementById("mytext").value = "My value";
James
fuente
66
Lo haré, ¿hay alguna manera de hacer que el vale sea NULO si el usuario hace clic en el campo?
SebastianOpperman
44
Sí, asigne un controlador de eventos al campo de entrada que borra 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.
James
1
Para mí no funcionó. ¿Lo anterior creará el atributo de valor?
Dchris
2
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, parece que no puedo cambiarlo, ni "this.parentNode.getElementByTagName ('input'). Style.display = 'none '; " ni utilizando this.style.display = 'none'; Además, incluso intenté usar ".style = display: none; ';" sin éxito ...
MahNas92
77
Esta y otras respuestas a la pregunta anterior parecen ignorar que se cambiará el valor predeterminado . El uso solo .value = ...cambia el valor actual. Restablecer el formulario (con, <input type="reset" />por ejemplo) cambiará el valor al original. Por el contrario, setAttribute("value", ...)funciona correctamente en Firefox y Chrome. El valor predeterminado cambia, pero el valor real solo cambia si el usuario no lo ha modificado ya. Sin embargo, setAttributeno se recomienda debido a la compatibilidad del navegador. ¿Hay alguna otra posibilidad?
JojOatXGME
55

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' ; 
Varada
fuente
52

Yo uso la función 'setAttribute':

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>
Pepe Amoedo
fuente
18
valuese 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, .valuerepresenta el valor real de trabajo del elemento.
Chris Baker
44
@ChrisBaker Haría +1000 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 representa en un control incrustado, 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 utilizando .value en la función de mi documento listo. Cuando tenía una devolución de datos asíncrona posterior que el usuario iniciaría, reutilizaría estos valores de entrada para automatizar algo en lo que hicieron clic anteriormente y necesitaba la página para "olvidarlos". Esta es la salsa mágica hacky que necesitaba. ¡Gracias Pepe y Chris!
MikeTeeVee
3
Estoy usando Yii 2.0 y configurar .value = '' directamente no ejecutaría correctamente la validación de formulario en el campo. El uso de setAttribute ('valor', '...') se maneja adecuadamente. ¡Gracias!
ekscrypto
Tengo un extraño problema que resolvió con setAttribute. Mi problema fue cambiar el valor de una entrada a través de una llamada de función, cambiar las últimas entradas cambiadas también.
SAMPro
Podría establecer el valor en una entrada modal emergente (texto) solo con esta respuesta. .value no me funcionó. Gracias
Ula
19

Prueba estos.

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

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
fuente
2
Nunca establezca valores que no sean de texto en dichos campos. Si lees de nuevo, leerás cadena (!) En algunos navegadores)
socketpair
18

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">
php-codificador
fuente
66
Es sorprendente que solo una persona aquí haya sugerido usar el valueatributo ...
Algy Taylor
@AlgyTaylor agradeció su esfuerzo y gracias por su maravilloso comentario
php-coder
15

Si está utilizando múltiples formularios, puede usar:

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>
David Caissy
fuente
3
La razón por la que me gusta esta respuesta es que usa el atributo "nombre" del formulario en lugar del ID del elemento DOM, ¿por qué agregar un campo ID a cada una de las entradas del formulario cuando no es necesario?
temblor
@tremor estuvo totalmente de acuerdo, y esta es la primera respuesta que encontré usando "nombre" no "id".
aguacate
8

La respuesta simple no está en Javascript, la forma más sencilla de obtener el marcador de posición es a través del atributo de marcador de posición

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
fuente
1
El problema con esto es que no funciona para Internet Explorer en absoluto. Si sabe que no va a tener clientes IE, entonces sí, esta es la mejor respuesta.
Sifu
2
@Sifu Esta es probablemente realmente una buena cosa que hacer, incluso si usted no sabe que tiene clientes de IE (posiblemente en adición a una solución JavaScript), ya que también se volverá a establecer el valor cuando se vacía el campo.
ahruss
1
@Sifu cuando IE no admitía el atributo de marcador de posición, use IE y vaya a www.1c3br3ak3r-multimedia.ca y mire la barra de búsqueda, usa el atributo de marcador de posición
RWolfe
1
@Jdoonan no hace mucho tiempo en realidad - caniuse.com/#feat=input-placeholder placeholder es compatible con IE10 y
versiones
6

Es simple; Un ejemplo es:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>
ultimatetechie
fuente
4
document.getElementById("fieldId").value = "Value";

o

document.forms['formId']['fieldId'].value = "Value";

o

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
fuente
3
setAttribute ('valor', 'Valor'); no establece el valor visible en el cuadro de texto para mí en Chrome.
Curtis
1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

También puede cambiar el valor predeterminado a un nuevo valor

<script>
document.getElementById("inputid").value = 4000;     
</script>
Tobiloba
fuente
1

Esta parte la usas en html

<input id="latitude" type="text" name="latitude"></p>

Esto es javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
Amranur Rahman
fuente
0

También puedes probar:

document.getElementById('theID').value = 'new value';
Bogdan Mates
fuente
3
Establecer un nuevo valor no es establecer el valor predeterminado. Por lo tanto, esto no resuelve el problema. Deberías decir eso como el comentario de la publicación una vez que hayas ganado suficiente reputación.
Daniel Cheung