Ajouter du texte au champ de saisie

Réponses:

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" />
Développer l'extrait

Ayman Hourieh
la source
5
Veuillez lire ma réponse à cette question également - Il n'y a vraiment aucune raison de devoir appeler $('#input-field-id')deux fois ... Réponse très simple cependant - +1
gnarf
2
Je pense qu'il devrait y avoir une fonction qui ajoute à la valeur d'une entrée comme vous pouvez avec le innerHTML.
Blue Sheep
109

Il existe deux options. L'approche d'Ayman est la plus simple, mais j'y ajouterais une note supplémentaire. Vous devriez vraiment mettre en cache les sélections jQuery, il n'y a aucune raison d'appeler $("#input-field-id")deux fois:

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

L'autre option .val()peut également prendre une fonction comme argument. Cela a l'avantage de travailler facilement sur plusieurs entrées:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
gnarf
la source
2
J'adore l '«autre option» - un peu de FP.
laher le
17

Si vous prévoyez d'utiliser l'ajout plus d'une fois, vous voudrez peut-être écrire une fonction:

//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);
}

Après vous pouvez simplement l'appeler:

jQ_append('my_input_id', 'add this text');
Margus
la source
Je ne peux pas ajouter d'espace réservé à une zone de recherche et je voudrais l'utiliser, puis effacer la zone lorsque l'utilisateur place le curseur dans la zone de recherche. Est-ce faisable?
Kevin W.
5

Vous recherchez probablement val ()

kgiannakakis
la source
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>
Développer l'extrait

Eh bien, lors de la création de cet exemple, je suis en quelque sorte un peu confus. " ValueText " vs> Current NodeText <N'est-il pas .val()censé fonctionner sur les données de l' attribut value ? Quoi qu'il en soit, moi et vous pouvez éclaircir cela tôt ou tard.

Cependant, le point pour l'instant est:

Lorsque vous travaillez avec des données de formulaire, utilisez .val () .

Lorsque vous traitez les données le plus souvent en lecture seule entre les balises, utilisez .text () ou .append () pour ajouter du texte.

Nadu
la source
1
Cela ajoute-t-il quelque chose de nouveau pour mieux répondre à la question? Je comprends que vous faites simplement une extension, mais cela a été répondu depuis un certain temps. Je veux juste m'assurer que la qualité de SO est maintenue.
Kevin Brown
1
Merci de votre attention - j'aime ça. Mais oui, vous avez raison, il n'y a pas grand chose de nouveau, l'essence reste la même. Cependant, lorsque j'ai digéré les réponses actuelles, j'ai senti qu'il pouvait y avoir un peu de travail sur le style et la mise en œuvre. J'ai d'abord vérifié si certains articles pouvaient être modifiés, mais à la fin, j'ai pensé qu'il était préférable d'en créer un nouveau. Alors, quoi de neuf: * Vous pouvez exécuter le snipped. * L'extension aide beaucoup sur la manière d'écrire du code auto-documenté, tout en ne distrayant pas trop l'essence.
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>

Production entrez la description de l'image ici

Ram Pukar
la source