Como obtenho o valor do campo de entrada de texto usando JavaScript?

873

Estou trabalhando em uma pesquisa com JavaScript. Eu usaria um formulário, mas ele atrapalha outra coisa na minha página. Eu tenho este campo de texto de entrada:

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

E este é o meu código JavaScript:

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

Como obtenho o valor do campo de texto em JavaScript?

user979331
fonte

Respostas:

1769

Existem vários métodos para obter um valor de caixa de texto de entrada diretamente (sem envolver o elemento de entrada dentro de um elemento de formulário):

Método 1:

document.getElementById('textbox_id').value para obter o valor da caixa desejada

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

 

Nota: Os métodos 2,3,4 e 6 retornam uma coleção de elementos; portanto, use [número inteiro] para obter a ocorrência desejada. Para o primeiro elemento, use [0], para o segundo, use 1 , e assim por diante ...

Método 2:

Uso document.getElementsByClassName('class_name')[whole_number].valueque retorna um Live HTMLCollection

Por exemplo, document.getElementsByClassName("searchField")[0].value; se esta é a primeira caixa de texto em sua página.

Método 3:

Uso document.getElementsByTagName('tag_name')[whole_number].valueque também retorna um HTMLCollection ao vivo

Por exemplo, document.getElementsByTagName("input")[0].value; se esta é a primeira caixa de texto em sua página.

Método 4:

document.getElementsByName('name')[whole_number].value que também> retorna um NodeList ativo

Por exemplo, document.getElementsByName("searchTxt")[0].value; se esta é a primeira caixa de texto com o nome 'searchtext' em sua página.

Método 5:

Use o poderoso document.querySelector('selector').valueque usa um seletor CSS para selecionar o elemento

Por exemplo, document.querySelector('#searchTxt').value; selecionado pelo ID
document.querySelector('.searchField').value;selecionado pela classe
document.querySelector('input').value;selecionada pelo tagname
document.querySelector('[name="searchTxt"]').value;selecionado pelo nome

Método 6:

document.querySelectorAll('selector')[whole_number].value que também usa um seletor CSS para selecionar elementos, mas retorna todos os elementos com esse seletor como um Nodelist estático.

Por exemplo, document.querySelectorAll('#searchTxt')[0].value; selecionado pelo ID
document.querySelectorAll('.searchField')[0].value;selecionado pela classe
document.querySelectorAll('input')[0].value; selecionada pelo tagname
document.querySelectorAll('[name="searchTxt"]')[0].value;selecionado pelo nome

Apoio, suporte

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

Links Úteis

  1. Para ver o suporte desses métodos com todos os erros, incluindo mais detalhes, clique aqui
  2. Diferença entre coleções estáticas e coleções ao vivo, clique aqui
  3. Diferença entre NodeList e HTMLCollection clique aqui
bugwheels94
fonte
O IE8 oferece suporte ao QSA , tanto quanto eu posso ver, ele simplesmente não suporta seletores CSS3 na string do seletor.
Fabrício Matté
@ FabrícioMatté Acabei de verificar aqui quirksmode.org/dom/tests/basics.html#querySelectorAll e ele me disse que ele doesnot
bugwheels94
Interessante. Teste simples no IE8 para shows Win7 que querySelectoré suportado jsfiddle.net/syNvz/show e QSA também jsfiddle.net/syNvz/2/show
Fabrício Matté
1
Documento extremamente útil, salvo para referência. Obrigado.
Andy
1
@GKislin Ah! Eu vejo. Bom que eu não sabia disso. Mas depois de ler isso , sinto-me relutante em adicionar esta edição à resposta agora. Talvez um dia depois, adicionarei um aviso para evitá-lo. Uma de todas as razões para advertir seria essa . Se você sentir como ele é muito bom, então quer fazer uma edição com uma advertência ou adicionar outra resposta sobre o seu desejo :)
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;
  }
}

Veja este funcionamento no codepen.

maudulus
fonte
Embora aprecie a integridade da resposta aceita, achei que essa resposta é útil para acessar novamente, no código JS, um valor inserido em um elemento de entrada de texto DOM (caixa de texto). Para detalhes, veja minha resposta, em outra parte desta questão.
Victoria Stuart
17

Eu criaria uma variável para armazenar a entrada assim:

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

E então eu apenas usaria a variável para adicionar o valor de entrada à string.

= "Your string" + input;

Vadim Tatarnikov
fonte
Se você deseja que ele seja um objeto javascript adequado para acessar programaticamente cada propriedade, faça o seguinte: var input = JSON.parse (document.getElementById ("input_id"). Value);
JakeJ
15

Você deve ser capaz de digitar:

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

Tenho certeza de que existem maneiras melhores de fazer isso, mas este parece funcionar em todos os navegadores e requer um entendimento mínimo do JavaScript para criar, melhorar e editar.

Fredrik A.
fonte
14

Além disso, você pode chamar os nomes das tags, assim: form_name.input_name.value; Assim, você terá o valor específico de determinada entrada em um formulário específico.

user3768564
fonte
Sim! Fiquei surpreso com essa simplicidade. Ter um olhar para realização de calculadora simples 4stud.info/web-programming/samples/dhtml-calculator.html São ther qualquer referência para este functiality javascript, causar I antes que eu sempre uso jQuery ou getElementById
Grigory Kislin
5

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

Testado no Chrome e Firefox:

Obter valor por ID do elemento:

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

Defina o valor no elemento do formulário:

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

Veja também uma implementação da calculadora JavaScript: http://www.4stud.info/web-programming/samples/dhtml-calculator.html

ATUALIZAÇÃO de @ bugwheels94: ao usar esse método, esteja ciente desse problema .

Grigory Kislin
fonte
3

Você pode usar onkeyup quando tiver mais campo de entrada. Suponha que você tenha quatro ou input.then document.getElementById('something').valueé irritante. precisamos escrever 4 linhas para buscar o valor do campo de entrada.

Portanto, você pode criar uma função que armazene valor no objeto no evento keyup ou keydown.

Exemplo:

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

Pode-se usar o form.elements para obter todos os elementos em um formulário. Se um elemento tiver um ID, ele poderá ser encontrado com .namedItem ("id"). Exemplo:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

Fonte: w3schools

Valter Ekholm
fonte
2

Se você inputestá em um forme deseja obter valor após o envio, pode fazer o seguinte

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

Beneficie desta maneira: Exemplo: sua página tem 2 form para entrada sendere receiverinformação.

Se você não usar formpara obter valor, então
- Você pode definir 2 diferentes id(ou tagou name...) para cada campo como sender-namee receiver-name, sender-addresse receiver-address, ...
- Se você definir o mesmo valor para 2 entradas, depois getElementsByName(ou getElementsByTagName.. .) você precisa se lembrar de 0 ou 1 é senderou receiver. Mais tarde, se você alterar a ordem de 2 formem html, precisará verificar este código novamente

Se você usa form, então você pode usar name, address...

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

js simples

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

Você pode ler o valor

searchTxt.value

Kamil Kiełczewski
fonte
-3

Se você estiver usando jQuery, usando o plugin formInteract, basta fazer o seguinte:

// Just keep the HTML as it is.

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

Na parte inferior da página, inclua este arquivo de plug-in e escreva 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
});

Ou, se estiver usando um URL parametrizado, use o seguinte:

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

Aqui está o link para o projeto https://bitbucket.org/ranjeet1985/forminteract

Você pode usar este plugin para muitos propósitos, como obter o valor de um formulário, colocar valores em um formulário, validar formulários e muito mais. Você pode ver algum exemplo de código no arquivo index.html do projeto.

Claro que sou o autor deste projeto e todos são bem-vindos para melhorá-lo.

Ranjeet Rana
fonte
7
Você provavelmente deve mencionar que este é seu próprio plugin pessoal.
2118 Hanna
Há um erro de digitação nos trechos de código. Na segunda parte do código, está faltando uma citação dupla.
Vincenzo