Establecer el valor de un campo de entrada

521

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

0
932

Esta es una forma de hacerlo:

document.getElementById("mytext").value = "My value";
12
  • 6
    Lo haré, ¿hay alguna manera de hacer que el valor sea NULL si el usuario hace clic en el campo? SebastianOpperman 30/09/11 a las 10:46
  • 4
    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 estableciendo el valor en nada, similar a la respuesta anterior. James 30/09/11 a las 10:48
  • 1
    para mí no funcionó. ¿Lo anterior creará el atributo de valor? Dchris 22/0314 a las 11:44
  • 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 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 intenté usar ".style = display: none; ';" sin éxito ...MahNas92 5 de agosto de 2016 a las 19:00
  • 9
    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 se cambia, pero el valor real solo se cambia si el usuario aún no lo ha modificado. Sin embargo, setAttributeno se recomienda debido a la compatibilidad del navegador. ¿Existe alguna otra posibilidad? JojOatXGME 14 de junio de 2017 a las 17:08
64

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>
5
  • 25
    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 lidiar con el valor original. Después de que se carga DOM, .valuerepresenta el valor de trabajo real del elemento. Chris Baker 15 de septiembre de 2014 a las 20:06
  • 4
    @ChrisBaker Yo 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 procesa 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 la función de preparación de documentos. Cuando tenía una devolución de datos asincrónica posterior que el usuario iniciaba, reutilizaba estos valores de entrada para automatizar algo en lo que habían hecho clic antes y necesitaba la página para "olvidarlos". Esta es la salsa mágica hacky que necesitaba. ¡Gracias Pepe y Chris! MikeTeeVee 16 de agosto de 2016 a las 16:22
  • 3
    Estoy usando Yii 2.0 y establecer el .value = '' directamente no ejecutaría correctamente la validación del formulario en el campo. El uso de setAttribute ('valor', '...') se maneja correctamente. ¡Gracias! ekscrypto 27/02/2017 a las 13:33
  • Tengo un problema extraño que soluciono con setAttribute. Mi problema fue cambiar el valor de una entrada a través de una llamada de función, cambiar también las últimas entradas cambiadas. SAMPro 19/04/18 a las 21:43
  • Podría establecer el valor en una entrada modal emergente (texto) solo usando esta respuesta. .value no funcionó para mí. GraciasUla 23 de abril de 2018 a las 7:00
60

si su formulario contiene un campo de entrada como

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

luego 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' ; 
1
  • ¡AYUDA! Lo hago, pero el valor siempre vuelve al original una vez que hago clic en otro campo o en cualquier botón de la página. Este es el sitio web que 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 feb a las 0:23
20

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>
4
  • 4
    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 de ID a cada una de las entradas del formulario cuando no es necesario? tremor 12/06/18 a las 12:18
  • @tremor estuvo totalmente de acuerdo, y esta es la primera respuesta que encontré usando "nombre" no "id". avocado 15 mar.20 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. oCcSking 11 de marzo 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 del sitio. Cuando abordo la entrada directamente, se actualiza. Timo 14 de mayo a las 7:39
19

Pruebe estos.

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

// or

var current = document.getElementById("current");
current.value = 12
2
  • 2
    Nunca establezca valores que no sean de texto en tales campos. Si vuelve a leer, leerá la cadena (!) En algunos navegadores)socketpair 4/04/2014 a las 14:21
  • ¡AYUDA! Lo hago, pero el valor siempre vuelve al original una vez que hago clic en otro campo o en cualquier botón de la página. Este es el sitio web que 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 feb a las 0:23
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">
2
  • 7
    Es sorprendente que solo una persona aquí haya sugerido usar el valueatributo ...Algy Taylor 15/01/18 a las 15:12
  • @AlgyTaylor apreció su esfuerzo y gracias por su maravilloso comentariophp-coder 20 de enero de 2018 a las 12:34
12

2021 Respuesta

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

más información de otra respuesta de StackOverflow:

querySelector lets you find elements with rules that can't be expressed with getElementById and 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">
2
  • 1
    ¿Desea agregarlo a su respuesta o debería publicar una nueva respuesta: document.querySelector("#name").value='foo'obras con las idque se usa ampliamente? Timo 14 de mayo a las 7:52
  • 1
    @Timo Bueno, mi respuesta responde a la pregunta, querySelectorpuede tener múltiples reglas. ¡Tu comentario es útil! Lo votaré, pero no publicaré una nueva respuesta porque es lo mismoRunsis 14 de mayo y 16:10
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" />
4
  • 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 6 de agosto de 2014 a las 15:57
  • 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 6 de agosto de 2014 a las 16:03
  • 1
    @Sifu cuando IE no admitió 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ónRWolfe 15/08/2014 a las 21:20
  • 1
    @Jdoonan no hace tanto tiempo en realidad - caniuse.com/#feat=input-placeholder placeholder es compatible con IE10 y versiones posterioresdanwellman 20/08/15 a las 14:50
7
document.getElementById("fieldId").value = "Value";

o

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

o

document.getElementById("fieldId").setAttribute('value','Value');
2
  • 4
    setAttribute ('valor', 'Valor'); no establece el valor visible en el cuadro de texto para mí en Chrome. Curtis 6 de agosto de 2018 a las 6:00
  • ¡AYUDA! Los hago todos, pero el valor siempre vuelve al original una vez que hago clic en otro campo o en cualquier botón de la página. El sitio web que hago con la clase "_56AraZ" shopee.vn/buyer/login?next=https%3A%2F%2Fshopee.vn%2FZui Zui 28 feb a las 0:20
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>
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>
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>
1

Si el campo, por cualquier motivo, solo tiene un atributo de nombre y nada más, puede intentar esto:

document.getElementsByName("INPUTNAME")[0].value = "TEXT HERE";
1
<input id="a_name" type="text" />

Aquí está la solución usando jQuery:

$(document).ready(function(){
  $('#a_name').val('something');
});

O, usando JavaScript:

document.getElementById("a_name").value = "Something";

Feliz codificación :)

0

También puedes probar:

document.getElementById('theID').value = 'new value';
1
  • 4
    Establecer un nuevo valor no es establecer el valor predeterminado. Por tanto, esto no resuelve el problema. Debería decirlo como comentario de la publicación una vez que haya ganado suficiente reputación. Daniel Cheung 2 de septiembre de 2015 a las 12:28
0

Acceso directo

Si usa ID, entonces tiene acceso directo a la entrada en el alcance global de JS

myInput.value = 'default_value'
<input id="myInput">
0

Esto funciona para mi

//HTML
<div id="mytext">Some Text Value</div>

// JavaScript
document.getElementById("mytext").value = "My value";