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

874

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?

usuario979331
fuente

Respuestas:

1770

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: Los métodos 2, 3, 4 y 6 devuelven una colección de elementos, por lo tanto, use [número_ entero] para obtener la aparición deseada. Para el primer elemento, use [0], para el segundo use 1 , y así sucesivamente ...

Método 2:

Uso document.getElementsByClassName('class_name')[whole_number].valueque devuelve una colección Live HTMLC

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

Método 3:

Uso document.getElementsByTagName('tag_name')[whole_number].valueque también devuelve una colección HTMLC en vivo

Por ejemplo, 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 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:

Use el poderoso document.querySelector('selector').valueque usa un selector 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 tagname
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, document.querySelectorAll('#searchTxt')[0].value; seleccionado por id
document.querySelectorAll('.searchField')[0].value;seleccionado por clase
document.querySelectorAll('input')[0].value; seleccionado por tagname
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 la compatibilidad 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í
bugwheels94
fuente
IE8 es compatible con QSA por lo que puedo ver, simplemente no es compatible con los selectores CSS3 en la cadena de selección.
Fabrício Matté
@ FabrícioMatté acabo de comprobar aquí quirksmode.org/dom/tests/basics.html#querySelectorAll y me dijo que no lo hace
bugwheels94
Interesante. Una prueba simple en IE8 para Win7 muestra que querySelectores compatible jsfiddle.net/syNvz/show y QSA también jsfiddle.net/syNvz/2/show
Fabrício Matté
1
Documento extremadamente útil, guardado para referencia. Gracias.
Andy
1
@GKislin ¡Ah! Veo. Es bueno que no lo supiera. Pero después de leer esto , 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 de advertencia sería esta . Si usted siente que es muy agradable, a continuación, o bien hacer una edición con una advertencia o añadir otra respuesta a su deseo :)
bugwheels94
33
//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 este funcionamiento en codepen.

maudulus
fuente
Si bien aprecio la integridad de la respuesta aceptada, encontré que esta respuesta es útil al 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 Stuart
17

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;

Vadim Tatarnikov
fuente
Si desea que sea un objeto javascript adecuado para que pueda acceder programáticamente a cada propiedad, simplemente haga: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ
15

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 hacerlo, pero parece que funciona en todos los navegadores, y requiere una comprensión mínima de JavaScript para crear, mejorar y editar.

Fredrik A.
fuente
14

También puede, llamar 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.

usuario3768564
fuente
¡Si! Me sorprendió esta simplicidad. Echar un vistazo a la realización de una simple calculadora 4stud.info/web-programming/samples/dhtml-calculator.html Están allí cualquier referencia para este functiality javascript, porque yo antes siempre uso de jQuery o getElemenById
Grigory Kislin
5

Prueba este

<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>
Hari Das
fuente
4

Probado en Chrome y Firefox:

Obtener valor por elemento id:

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

Establecer valor en 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 .

Grigory Kislin
fuente
3

Puede usar onkeyup cuando tenga más campo de entrada. Supongamos que tiene cuatro o input.then document.getElementById('something').valuees 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>
Dhruv Raval
fuente
2

Uno puede usar el 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

Valter Ekholm
fuente
2

Si inputestá en un formy desea obtener valor después de enviar, puede hacer como

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

Beneficio de esta manera: Ejemplo, su página tiene 2 form para entrada sendere receiverinformación.

Si no se utiliza formpara el valor get a continuación
- Puede configurar 2 diferente id(o tag, o name...) para cada campo como sender-namey receiver-name, sender-addressy receiver-address, ...
- Si configura mismo valor para la entrada 2, a continuación, después getElementsByName(o getElementsByTagName.. .) necesita recordar 0 o 1 es sendero receiver. Más adelante, si cambia el orden de 2 formen html, debe verificar este código nuevamente

Si se utiliza form, a continuación, se puede utilizar name, address...

Phan Van Linh
fuente
1
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
Davinder Singh
fuente
1

js simple

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}
Ricardo Luis Zuluaga Salazar
fuente
-2

Puedes leer el valor por

searchTxt.value

Kamil Kiełczewski
fuente
-3

Si está utilizando jQuery, entonces utilizando plugin formInteract, solo necesita hacer esto:

// 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 solo 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í está el enlace al proyecto https://bitbucket.org/ranjeet1985/forminteract

Puede usar este complemento para muchos propósitos, como obtener el valor de un formulario, poner valores en un formulario, validación de formularios y muchos más. Puede ver algún ejemplo de código en el archivo index.html del proyecto.

Por supuesto, soy el autor de este proyecto y todos son bienvenidos para mejorarlo.

Ranjeet Rana
fuente
77
Probablemente debería mencionar que este es su propio complemento personal.
Hanna
Hay un error tipográfico en los fragmentos de código. En la segunda parte del código, falta una comilla doble.
Vincenzo