Anexar texto ao campo de entrada

Respostas:

203 

    $('#input-field-id').val($('#input-field-id').val() + 'more text');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-field-id" />
Expandir trecho

Ayman Hourieh
fonte
5
Por favor, leia minha resposta a esta pergunta também - Não há realmente nenhuma razão para ter que ligar $('#input-field-id')duas vezes ... Uma resposta muito simples - +1
gnarf
2
Acho que deve haver uma função que agrega valor a uma entrada, como você pode fazer com o innerHTML.
Blue Sheep
109

Existem duas opções. A abordagem de Ayman é a mais simples, mas eu acrescentaria uma nota extra a ela. Você realmente deve armazenar em cache as seleções do jQuery, não há razão para chamar $("#input-field-id")duas vezes:

var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

A outra opção .val()também pode ter uma função como argumento. Isso tem a vantagem de funcionar facilmente com várias entradas:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
gnarf
fonte
2
Amando a 'outra opção' - um bom pedaço de FP.
laher
17

Se você planeja usar o acréscimo mais de uma vez, convém escrever uma função:

//Append text to input element
function jQ_append(id_of_input, text){
    var input_id = '#'+id_of_input;
    $(input_id).val($(input_id).val() + text);
}

Depois que você pode simplesmente chamá-lo:

jQ_append('my_input_id', 'add this text');
Margus
fonte
Não consigo adicionar espaço reservado a uma caixa de pesquisa e gostaria de usar isso e desmarcar a caixa quando o usuário colocar o cursor na caixa de pesquisa. Isso é viável?
Kevin W.
5

Você provavelmente está procurando val ()

kgiannakakis
fonte
4 

	// Define appendVal by extending JQuery
	$.fn.appendVal = function( TextToAppend ) {
		return $(this).val(
			$(this).val() + TextToAppend
		);
	};
//_____________________________________________

	// And that's how to use it:
	$('#SomeID')
		.appendVal( 'This text was just added' )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea 
          id    =  "SomeID"
          value =  "ValueText"
          type  =  "text"
>Current NodeText
</textarea>
  </form>
Expandir trecho

Bem, ao criar este exemplo, de alguma forma fiquei um pouco confuso. " ValueText " vs> Current NodeText <Não .val()deve ser executado nos dados do valor atributo de ? De qualquer forma, eu e você podemos esclarecer isso mais cedo ou mais tarde.

No entanto, o ponto por agora é:

Ao trabalhar com dados de formulário, use .val () .

Ao lidar com a maioria dos dados somente leitura entre a tag, use .text () ou .append () para acrescentar o texto.

Nadu
fonte
1
Isso adiciona algo novo para responder melhor à pergunta? Eu entendo que você está apenas fazendo uma extensão, mas isso já foi respondido há algum tempo. Só quero ter certeza de que a qualidade do SO é mantida.
Kevin Brown de
1
Obrigado pelo carinho - eu gosto disso. Mas sim, você está certo, não há muitas novidades, a essência permanece a mesma. No entanto, ao digerir as respostas atuais, senti que poderia ser feito um pouco sobre o estilo e a implementação. Verifiquei primeiro se algumas das postagens poderiam ser editadas, mas no final achei melhor fazer uma nova. Então, o que há de novo: * Você pode executar o recortado. * A extensão ajuda muito na maneira de escrever código autodocumentado, sem distrair muito a essência.
Nadu
0 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            font-family: arial;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <button id="more">More</button><br/><br/>
    <div>
        User Name : <input type="text" class="users"/><br/><br/>
    </div>
    <button id="btn_data">Send Data</button>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#more').on('click',function(x){
                var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
                $("div").append(textMore);
            });

            $('#btn_data').on('click',function(x){
                var users=$(".users");
                $(users).each(function(i, e) {
                    console.log($(e).val());
                });
            })
        });
    </script>
</body>
</html>

Resultado insira a descrição da imagem aqui

Ram Pukar
fonte