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

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?

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

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

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;

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.

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.

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>

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 .

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>

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

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

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

js simples

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

Você pode ler o valor

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>

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.