Pregunta ¿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?


623
2017-07-19 15:00


origen


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   cuadro deseado

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

Nota: Los métodos 2,3,4 y 6 devuelven una colección de elementos, por lo tanto, utilice [whole_number] para obtener la ocurrencia deseada. Para el primer elemento, use [0],   para el segundo uso 1, y así...

Método 2:

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

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

Método 3:

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

Por ejemplo,  document.getElementsByTagName("input")[0].value;, si este es el primer cuadro de texto en tu 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 'searchtext' 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 Nodelist 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, incluyendo más detalles, haga clic aquí
  2. Diferencia entre las colecciones estáticas y las colecciones en vivo, haga clic aquí
  3. Diferencia entre NodeList y HTMLCollection haga clic aquí

1328
2017-07-19 15:02



//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. 


17
2017-11-04 22:34



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;


13
2018-06-04 07:12



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


11
2018-06-23 18:10



Debería poder escribir:

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

<script>
    var input = document.getElementById("searchTxt");

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

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


7
2018-06-01 22:17



Prueba este

<input type="text" onKeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>

3
2018-06-11 09:32



Probado en Chrome y Firefox:

Obtener valor por ID del 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.


2
2018-04-26 10:47