in

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

apple touch icon@2

Existen 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 caja deseada

Por ejemplo, document.getElementById("searchTxt").value;

Nota: El método 2, 3, 4 y 6 devuelve una colección de elementos, así que use [whole_number] para obtener la ocurrencia deseada. Para el primer elemento, use [0], para el segundo uso 1, etcétera…

Método 2:

Usar
document.getElementsByClassName('class_name')[whole_number].value que devuelve una colección Live HTMLCollection

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

Método 3:

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

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

Método 4:

document.getElementsByName('name')[whole_number].value que también> devuelve un NodeList en vivo

Por ejemplo, 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 usa un selector de CSS para seleccionar el elemento

Por ejemplo, document.querySelector('#searchTxt').value; seleccionado por id
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 de CSS para seleccionar elementos, pero devuelve todos los elementos con ese selector como una lista de nodos estática.

Por ejemplo, document.querySelectorAll('#searchTxt')[0].value; seleccionado por id
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

Apoyo

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í

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

60 161286 1564642329

¿Diferencias entre los métodos fromJson () y toJson () de Gson en Java?

gfg 200x200 min

¿Cómo instalar Python Pandas en Windows y Linux?