Ajouter du texte au champ de saisie

108

J'ai besoin d'ajouter du texte à un champ de saisie ...

jquery text append

— Kevin Brown
source

3

duplication possible de Est-il possible de faire ".value + =" dans JQuery?

— Patrick McElhaney

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

— Ram Pukar
source