Obter o valor em uma caixa de texto de entrada

Quais são as maneiras de obter e renderizar um valor de entrada usando o jQuery?

Aqui está um:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />

//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);

Você só pode selecionar um valor das duas maneiras a seguir:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

Se você deseja usar o JavaScript direto para obter o valor, veja como:

document.getElementById('txt_name').value 

Há uma coisa importante a mencionar:

$("#txt_name").val();

retornará o valor real atual de um campo de texto, por exemplo, se o usuário digitar algo após o carregamento da página.

Mas:

$("#txt_name").attr('value')

retornará valor de DOM / HTML.

Você pode obter o valueatributo diretamente, pois sabe que é um <input>elemento, mas seu uso atual .val()já é o atual.

Para o exposto acima, basta usar .valueo elemento DOM diretamente, assim :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});

Você precisa usar várias maneiras de obter o valor atual de um elemento de entrada.

MÉTODO 1

Se você quiser usar um simples .val(), tente o seguinte:

<input type="text" id="txt_name" />

Obter valores da entrada

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

Defina o valor como Entrada

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

MÉTODO - 2

Use .attr()para obter o conteúdo.

<input type="text" id="txt_name" value="" />

Acabei de adicionar um atributo ao campo de entrada. value=""atributo é aquele que carrega o conteúdo de texto que inserimos no campo de entrada.

$("input").attr("value");

MÉTODO - 3

você pode usar este diretamente em seu inputelemento.

$("input").keyup(function(){
    alert(this.value);
});

Você pode obter o valor assim:

this['inputname'].value

Onde thisrefere-se ao formulário que contém a entrada.

Eu acho que essa função está faltando aqui nas respostas anteriores:

.val( function(index, value) ) 

Para obter o valor da caixa de texto, você pode usar a val()função jQuery .

Por exemplo,

$('input:textbox').val() - Obter valor da caixa de texto.

$('input:textbox').val("new text message") - Defina o valor da caixa de texto.

Para aqueles que, como eu, são iniciantes em JS e obtêm, em undefinedvez de valor de texto, verifique se o seu idnão contém caracteres inválidos .

Você pode simplesmente definir o valor na caixa de texto.

Primeiro, você obtém o valor como

var getValue = $('#txt_name').val();

Depois de obter um valor definido na entrada como

$('#txt_name').val(getValue);

Tente isso. Isso funcionará com certeza.

var userInput = $('#txt_name').attr('value')