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

1041

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?

0
2027

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 to get the value of desired box

For example, document.getElementById("searchTxt").value;

 

Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first element, use [0], for the second one use 1, and so on...

Método 2:

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection

For example, document.getElementsByClassName("searchField")[0].value; if this is the first textbox in your page.

Método 3:

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection

For example, document.getElementsByTagName("input")[0].value;, if this is the first textbox in your page.

Método 4:

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList

For example, document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

Método 5:

Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element

For example, document.querySelector('#searchTxt').value; selected by id
document.querySelector('.searchField').value; selected by class
document.querySelector('input').value; selected by tagname
document.querySelector('[name="searchTxt"]').value; selected by name

Método 6:

document.querySelectorAll('selector')[whole_number].value which also uses a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.

For example, document.querySelectorAll('#searchTxt')[0].value; selected by id
document.querySelectorAll('.searchField')[0].value; selected by class
document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

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í
13
  • IE8 es compatible con QSA por lo que puedo ver, simplemente no es compatible con los selectores CSS3 en la cadena de selección. 22 de junio de 2013 a las 4:02
  • @ FabrícioMatté acabo de marcar aquí quirksmode.org/dom/tests/basics.html#querySelectorAll y me dijo que no 22 de junio de 2013 a las 4:10
  • 1
    Documento extremadamente útil, guardado como referencia. Gracias.
    Andy
    8 de diciembre de 2016 a las 17:47
  • 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. Quizás algún día después, lo agregaré con una advertencia para evitarlo. Una de todas las razones para advertir sería esta . Si cree que es realmente agradable, haga una edición con una advertencia o agregue otra respuesta a su deseo :) 26/04/2017 a las 14:05
  • 1
    @calyxofheld Utilice forEach o for bucle sobre todos ellos. Es algo muy básico en JS. ¿Ha revisado JS brevemente, si no? luego te recomendaré que lo revises primero. Seguir aprendiendo 28 de agosto a las 7:36
39
//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.

1
  • Si bien aprecio la integridad de la respuesta aceptada, encontré que esta respuesta es útil para: acceder, en código JS, a un valor ingresado en un elemento de entrada de texto DOM (cuadro de texto). Para obtener más detalles, consulte mi respuesta, en otra parte de esta pregunta. 5 de abril de 2017 a las 23:51
24

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;

2
  • Si desea que sea un objeto javascript adecuado para poder acceder mediante programación a cada propiedad, simplemente haga lo siguiente: var input = JSON.parse (document.getElementById ("input_id"). Value);
    JakeJ
    16/07/19 a las 13:33
  • ¡Respuesta simple y directa!
    Arun
    26 jul.20 a las 14:20
19

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

dieciséis

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

1
6

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

Probado en Chrome y Firefox:

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

ACTUALIZAR desde @ bugwheels94: cuando utilice este método, tenga en cuenta este problema .

3

Si inputestá en una 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>

Benefíciese de esta manera: por ejemplo, su página tiene 2 form para entrada sendere receiverinformación.

Si no usa formpara obtener valor, entonces
- Puede establecer 2 diferentes id(o tago name...) para cada campo como sender-namey receiver-name, sender-addressy receiver-address, ...
- Si establece el mismo valor para 2 entradas, entonces después getElementsByName(o getElementsByTagName.. .) debe recordar que 0 o 1 es sendero receiver. Más tarde, 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...

2

Se puede utilizar form.elements para obtener todos los elementos de 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

2

Puede usar onkeyup cuando tenga más campo de entrada. Suponga que tiene cuatro o entrada document.getElementById('something').value. Entonces es 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>
1
<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>
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();
}
1

Puede leer el valor por

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search</button>

ACTUALIZAR

Veo muchos votos negativos pero comentarios; sin embargo (para futuros lectores) en realidad esta solución funciona

0

Intenta esto ...

function handleValueChange() {
    var y = document.getElementById('textbox_id').value;
    var x = document.getElementById('result');
    x.innerHTML = y;
}

function changeTextarea() {
  var a = document.getElementById('text-area').value;
  var b = document.getElementById('text-area-result');
  b.innerHTML = a;
}
input {
  padding: 5px;
}

p {
  white-space: pre;
}
<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>

<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>
0

Han pasado bastantes años, pero caramba, esto se hizo demasiado difícil ...

function searchURL() {
   window.location = 'http://www.myurl.com/search/' + searchTxt.value
}

Entonces, básicamente searchTxt.value, devolverá el valor del campo de entrada con id='searchTxt'.

Con suerte, eso ayudará a alguien en 2021.

-5

Si está usando jQuery, al usar el complemento 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 que soy el autor de este proyecto y todos son bienvenidos para mejorarlo.

2
  • 9
    Probablemente debería mencionar que este es su propio complemento personal.
    Hanna
    18 de mayo de 2015 a las 16:23
  • 1
    Hay un error tipográfico en los fragmentos de código. En la segunda parte del código, falta una comilla doble. 17/01/19 a las 13:33