¿Cómo obtener el valor del campo de entrada de texto usando javascript?

Estoy trabajando en una búsqueda usando javascript. Yo usaría el formulario, pero en mi página arruinó todo. 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 de un campo de texto en javascript?

697
19 июля '12 в 18:00 2012-07-19 18:00 user979331 se establece el 19 de julio de 2012 a las 6:00 pm 2012-07-19 18:00
@ 12 respuestas

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

Método 1:

document.getElementById('textbox_id').value para obtener el valor del campo deseado

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

Nota: los métodos 2,3,4 y 6 devuelven una colección de elementos, así que use [whole_number] para obtener el evento deseado. Para el primer elemento, use [0], para el segundo, use 1 , etc ...

Método 2:

Use document.getElementsByClassName('class_name')[whole_number].value , que devuelve una colección HTMLC en vivo

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

Método 3:

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

Por ejemplo, document.getElementsByTagName("input")[0].value; Si este es el primer campo de texto en tu página.

Método 4:

document.getElementsByName('name')[whole_number].value , que también> devuelve una NodeList activa

Por ejemplo, document.getElementsByName("searchTxt")[0].value; Si este es el primer campo de texto llamado "búsqueda de texto" en su página.

Método 5:

Use poderoso document.querySelector('selector').value , que usa un selector CSS para seleccionar un elemento

Por ejemplo, document.querySelector('#searchTxt').value; Identificación seleccionada
document.querySelector('.searchField').value; seleccionado por clase
document.querySelector('input').value; etiqueta seleccionada
document.querySelector('[name="searchTxt"]').value; seleccionado por nombre

Método 6:

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

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

Apoyo

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

Enlaces utiles

1482
19 июля '12 в 18:02 2012-07-19 18:02 la respuesta está dada por bugwheels94 19 de julio, '12 a las 6:02 pm 2012-07-19 18: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; } } 
border=0

Mira cómo funciona en codephen.

19
05 нояб. la respuesta se da maudulus 05 nov. 2014-11-05 01:34 '14 a la 1:34 2014-11-05 01:34

Me gustaría crear una variable para mantener la entrada de la siguiente manera:

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

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

= "Your string" + input;

13
04 июня '15 в 10:12 2015-06-04 10:12 La respuesta fue dada por Vadim Tatarnikov el 4 de junio de 2015 a las 10:12 2015-06-04 10:12

También puede llamar nombres de etiquetas, por ejemplo: form_name.input_name.value; Por lo tanto, tendrá un valor específico de una entrada específica en una forma determinada.

12
23 июня '14 в 21:10 2014-06-23 21:10 la respuesta la da el usuario 3768564 el 23 de junio de 2014 a las 21:10 2014-06-23 21:10

Debes poder escribir:

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

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

7
02 июня '14 в 1:17 2014-06-02 01:17 Fredrik A. da la respuesta el 2 de junio de 2014 a las 1:17 2014-06-02 01:17

Prueba esto

 <input type="text" onKeyup="trackChange(this.value)" id="myInput"> <script> function trackChange(value) { window.open("http://www.google.co.in/search?output=search } </script> 
3
11 июня '13 в 12:32 2013-06-11 12:32 Hari Das da la respuesta el 11 de junio de 2013 a las 12:32 2013-06-11 12:32

Probado en Chrome y Firefox:

Obtener valor por ID de artículo:

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

El valor establecido 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/

Vea también la implementación de la calculadora de JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

ACTUALIZACIÓN de @ bugwheels94: al usar este método, debe conocer este problema .

2
26 апр. GKislin respondió el 26 de abril 2017-04-26 13:47 '17 a la 1:47 pm 2017-04-26 13:47

Puede usar form.elements para obtener todos los elementos en un formulario. Si el artículo tiene un identificador, se puede encontrar usando. 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

1
04 июля '18 в 10:29 2018-07-04 10:29 La respuesta fue dada por Valter Ekholm el 4 de julio de 18 a las 10:29 2018-07-04 10:29

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

Por lo tanto, puede crear una función que almacene un valor en un objeto en un 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> 
0
11 дек. La respuesta la da Dhruv Raval el 11 de diciembre. 2018-12-11 08:12 '18 a las 8:12 am 2018-12-11 08:12
 <input id="new" > <button onselect="myFunction()">it</button> <script> function myFunction() { document.getElementById("new").value = "a"; } </script> 
0
07 марта '18 в 20:47 2018-03-07 20:47 La respuesta la da Davinder Singh el 7 de marzo de 18 a 20:47 2018-03-07 20:47

js simple

 function copytext(text) { var textField = document.createElement('textarea'); textField.innerText = text; document.body.appendChild(textField); textField.select(); document.execCommand('copy'); textField.remove(); } 
0
17 янв. Respuesta dada por Ricardo Luis Zuluaga Salazar el 17 de enero. 2019-01-17 16:14 '19 a las 4:14 pm 2019-01-17 16:14

Si está usando jQuery, entonces está usando el complemento formInteract, solo necesita hacerlo:

 // Just keep the HTML as it is. <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> 

En la parte inferior de la página, simplemente incluya este archivo de complemento y escriba este código:

 // Initialize one time at the bottom of the page. var search= $("#searchTxt).formInteract(); search.getAjax("http://www.myurl.com/search/", function(rsp){ // Now do whatever you want to with your response }); 

O, si usa una URL parametrizada, use esto:

 $.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){ // Now do work with your response; }) 

Aquí hay un enlace al proyecto https://bitbucket.org/ranjeet1985/forminteract

Puede usar este complemento para muchos propósitos, como obtener un valor de formulario, ingresar valores en un formulario, validar formularios y más. Puede ver el código de muestra en el archivo index.html del proyecto.

Por supuesto, soy el autor de este proyecto, y todos pueden hacerlo mejor.

-3
05 февр. Respuesta dada a Ranjeet Rana 05 Feb. 2015-02-05 08:47 '15 a las 8:47 2015-02-05 08:47

Otras preguntas sobre tags o Haz una pregunta