¿Cómo obtengo el valor del campo de entrada de texto usando JavaScript?

Estoy trabajando en una búsqueda con JavaScript. Usaría un formulario, pero estropea algo más en mi página. Tengo este campo de texto de entrada:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Y este es mi código JavaScript:

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

¿Cómo obtengo el valor del campo de texto en JavaScript?

preguntado el 19 de julio de 12 a las 16:07

15 Respuestas

Hay varios métodos para obtener un valor de cuadro de texto de entrada directamente (sin envolver el elemento de entrada dentro de un elemento de formulario):

Método 1:

document.getElementById('textbox_id').value para obtener el valor de la casilla deseada

Por ejemplo, los servicios administrativos de document.getElementById("searchTxt").value;

 

Nota: Los métodos 2,3,4, 6, 0 y XNUMX devuelven una colección de elementos, así que use [número_entero] para obtener la ocurrencia deseada. Para el primer elemento, use [XNUMX], para el segundo use 1, y así...

Método 2:

Utiliza la document.getElementsByClassName('class_name')[whole_number].value que devuelve una Live HTMLCollection

Por ejemplo, los servicios administrativos de document.getElementsByClassName("searchField")[0].value; si este es el primer cuadro de texto en su página.

Método 3:

Utiliza la document.getElementsByTagName('tag_name')[whole_number].value que también devuelve una HTMLCollection en vivo

Por ejemplo, los servicios administrativos de document.getElementsByTagName("input")[0].value;, si este es el primer cuadro de texto en su página.

Método 4:

document.getElementsByName('name')[whole_number].value que también > devuelve una lista de nodos en vivo

Por ejemplo, los servicios administrativos de document.getElementsByName("searchTxt")[0].value; si este es el primer cuadro de texto con el nombre 'texto de búsqueda' en su página.

Método 5:

Usa el poderoso document.querySelector('selector').value que utiliza un selector CSS para seleccionar el elemento

Por ejemplo, los servicios administrativos de document.querySelector('#searchTxt').value; seleccionado por identificación
document.querySelector('.searchField').value; seleccionado por clase
document.querySelector('input').value; seleccionado por nombre de etiqueta
document.querySelector('[name="searchTxt"]').value; seleccionado por nombre

Método 6:

document.querySelectorAll('selector')[whole_number].value que también usa un selector CSS para seleccionar elementos, pero devuelve todos los elementos con ese selector como una lista de nodos estática.

Por ejemplo, los servicios administrativos de document.querySelectorAll('#searchTxt')[0].value; seleccionado por identificación
document.querySelectorAll('.searchField')[0].value; seleccionado por clase
document.querySelectorAll('input')[0].value; seleccionado por nombre de etiqueta
document.querySelectorAll('[name="searchTxt"]')[0].value; seleccionado por nombre

Soporte

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

Enlaces útiles

  1. Para ver el soporte de estos métodos con todos los errores, incluidos más detalles, haga clic aquí
  2. Diferencia entre colecciones estáticas y colecciones en vivo, haga clic aquí
  3. Diferencia entre NodeList y HTMLCollection haga clic aquí

Respondido el 16 de diciembre de 19 a las 11:12

IE8 soporta QSA por lo que puedo ver, simplemente no es compatible con los selectores CSS3 en la cadena del selector. - fabricio matte

@FabrícioMatté acabo de comprobar aquí quirksmode.org/dom/tests/basics.html#querySelectorAll y me dijo que no - ruedas de insecto94

Documento extremadamente útil, guardado como referencia. Gracias. - Andy

@GKislin Ah! Veo. Qué bueno que no sabía sobre eso. Pero después de leer este, me siento reacio a agregar esta edición a la respuesta en este momento. Tal vez algún día después, lo agregaré con una advertencia para evitarlo. Una de todas las razones para la advertencia sería este. Si cree que es realmente agradable, haga una edición con una advertencia o agregue otra respuesta según su deseo :) - ruedas de insecto94

@calyxofheld Cualquiera de los usos para cada o bucle for sobre todos ellos. Es algo muy básico en JS. ¿Ha revisado JS brevemente, si no? entonces te recomendaré que revises eso primero. Seguir aprendiendo - ruedas de insecto94

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

Ver este funcionamiento en codepen.

Respondido el 08 de diciembre de 16 a las 05:12

Si bien aprecio la integridad de la respuesta aceptada, encontré que esta respuesta es útil para: acceder, en código JS, a un valor ingresado en un elemento de entrada de texto DOM (cuadro de texto). Para más detalles, vea mi respuesta, en otra parte de esta pregunta. - Victoria Estuardo

Crearía una variable para almacenar la entrada de esta manera:

var input = document.getElementById("input_id").value;

Y luego solo usaría la variable para agregar el valor de entrada a la cadena.

= "Your string" + input;

Respondido el 04 de junio de 15 a las 08:06

Si desea que sea un objeto javascript adecuado para que pueda acceder mediante programación a cada propiedad, simplemente haga lo siguiente: var input = JSON.parse(document.getElementById("input_id").value); - jakej

¡Respuesta simple y directa! - Arun

Debería poder escribir:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Estoy seguro de que hay mejores formas de hacer esto, pero esta parece funcionar en todos los navegadores y requiere una comprensión mínima de JavaScript para hacer, mejorar y editar.

Respondido el 23 de enero de 19 a las 17:01

También puede llamar por nombres de etiquetas, así: form_name.input_name.value; Entonces tendrá el valor específico de determinada entrada en una forma específica.

Respondido el 23 de junio de 14 a las 19:06

¡Sí! Me sorprendió esta sencillez. Eche un vistazo a la realización de la calculadora simple 4stud.info/web-programming/samples/dhtml-calculator.html ¿Hay alguna referencia para esta funcionalidad de javascript, porque antes siempre uso jQuery o getElementById? Grigori Kislin

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

respondido 28 nov., 21:15

Short

Puede leer el valor por searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search</button>

Respondido el 10 de enero de 22 a las 14:01

La edición está bien; los comentarios sobre votos negativos no pertenecen a las publicaciones. Absténgase de retroceder cuando la publicación se desbloquee. Zoe apoya a Ucrania

Probado en Chrome y Firefox:

Obtener valor por id de elemento:

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

Establecer valor en el elemento de formulario:

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

También eche un vistazo a la implementación de una calculadora de JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

ACTUALIZACIÓN de @bugwheels94: al usar este método, tenga en cuenta este problema.

Respondido 05 Jul 17, 09:07

Si input está en un form y desea obtener valor después de enviar, puede hacer Me gusta

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Benefíciese de esta manera: Ejemplo que tiene su página 2 form para entrada sender y receiver información.

If tu no usas form para obtener valor entonces
- Puedes configurar 2 diferentes id(o tag or name ...) para cada campo como sender-name y receiver-name, sender-address y receiver-address...
- Si configura el mismo valor para 2 entradas, luego getElementsByName (o getElementsByTagName ...) necesitas recordar 0 o 1 es sender or receiver. Más tarde si cambias el orden de 2 form en html, debe verificar este código nuevamente

If tu usas form, entonces puedes usar name, address...

respondido 09 nov., 19:08

function handleValueChange() {
    var y = document.getElementById('textbox_id').value;
    var x = document.getElementById('result');
    x.innerHTML = y;
}

function changeTextarea() {
  var a = document.getElementById('text-area').value;
  var b = document.getElementById('text-area-result');
  b.innerHTML = a;
}
input {
  padding: 5px;
}

p {
  white-space: pre;
}
<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>

<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>

respondido 28 nov., 21:15

Uno puede usar form.elements para obtener todos los elementos en un formulario. Si un elemento tiene id, se puede encontrar con .namedItem("id"). Ejemplo:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Fuente: w3schools

Respondido 04 Jul 18, 08:07

Puede usar onkeyup cuando tiene más campos de entrada. Supongamos que tiene cuatro o input.then document.getElementById('something').value es molesto necesitamos escribir 4 líneas para obtener el valor del campo de entrada.

Por lo tanto, puede crear una función que almacene valor en el objeto en el evento keyup o keydown.

Ejemplo:

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript:

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

Respondido el 11 de diciembre de 18 a las 05:12

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

respondido 07 mar '18, 18:03

simple js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

Respondido el 17 de enero de 19 a las 13:01

function searchURL() {
   window.location = 'http://www.myurl.com/search/' + searchTxt.value
}

Así que básicamente searchTxt.value devolverá el valor del campo de entrada con id='searchTxt'.

respondido 28 nov., 21:15

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.