¿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 entrada de texto:
<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?
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').valuepara obtener el valor de la caja deseada
Por ejemplo
document.getElementById("searchTxt").value;
Nota: Los métodos 2,3,4 y 6 devuelven una colección de elementos, así que utilice [número_entero] para obtener la aparición deseada. Para el primer elemento, utilice [0], para el segundo utilice [1], y así sucesivamente...
Método 2
Uso
document.getElementsByClassName('class_name')[whole_number].valueque devuelve una colección HTML en vivo
Por ejemplo
document.getElementsByClassName("searchField")[0].value;si este es el primer cuadro de texto de su página.
Método 3
Uso document.getElementsByTagName('tag_name')[whole_number].valueque también devuelve una 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].valueque también > devuelve una Lista de Nodos 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
Utilice el potente document.querySelector('selector').valueque utiliza un selector CSS para seleccionar el elemento.
Por ejemplo
document.querySelector('#searchTxt').value;seleccionado por identificacióndocument.querySelector('.searchField').value;seleccionado por clasedocument.querySelector('input').value;seleccionado por nombre de etiquetadocument.querySelector('[name="searchTxt"]').value;seleccionado por nombre
Método 6
document.querySelectorAll('selector')[whole_number].valueque 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
document.querySelectorAll('#searchTxt')[0].value;seleccionado por identificacióndocument.querySelectorAll('.searchField')[0].value;seleccionado por clasedocument.querySelectorAll('input')[0].value;seleccionado por nombre de etiquetadocument.querySelectorAll('[name="searchTxt"]')[0].value;seleccionado por nombre
Apoyo
| Navegador | Método 1 | Método 2 | Método3 | Método4 | Método5/6 |
|---|---|---|---|---|---|
| IE6 | Y (con errores) | norte | Y | Y (con errores) | norte |
| IE7 | Y (con errores) | norte | Y | Y (con errores) | norte |
| IE8 | Y | norte | Y | Y (con errores) | Y |
| IE9 | Y | Y | Y | Y (con errores) | Y |
| IE10 | Y | Y | Y | Y | Y |
| FF3.0 | Y | Y | Y | Y | norte |
| FF3.5/FF3.6 | Y | Y | Y | Y | Y |
| FF4b1 | Y | Y | Y | Y | Y |
| CG4/CG5 | Y | Y | Y | Y | AA=SÍ,N=NO |
| Safari4/Safari5 | Y | Y | Y | Y | Y |
| Ópera10.10/ | |||||
| Ópera10.53/ | Y | Y | Y | Y (con errores) | Y |
| Ópera10.60 | |||||
| Ópera 12 | Y | Y | Y | Y | Y |
Llave:
Es decir , Internet Explorer
FF =Mozilla Firefox
GC = Google Chrome
Enlaces útiles
- Para ver el soporte de estos métodos con todos los errores incluyendo más detalles haga clic aquí
- Diferencia entre colecciones estáticas y colecciones en vivo, haga clic aquí
- Diferencia entre NodeList y HTMLCollection, haga clic aquí
//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;
}
}
Vea esto funcionando en codepen.
Crearía una variable para almacenar la entrada de esta manera:
var input = document.getElementById("input_id").value;
Y luego simplemente usaría la variable para agregar el valor de entrada a la cadena.
= "Your string" + input;
