Fügen Sie dem Eingabefeld Text hinzu

Antworten:

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" />
Erweitern Sie das Snippet

Ayman Hourieh
quelle
5
Bitte lesen Sie auch meine Antwort auf diese Frage - Es gibt wirklich keinen Grund, $('#input-field-id')zweimal anrufen zu müssen ... Sehr einfache Antwort - +1
Gnarf
2
Ich denke, es sollte eine Funktion geben, die den Wert einer Eingabe erhöht, wie Sie es mit der können innerHTML.
Blue Sheep
109

Es gibt zwei Möglichkeiten. Aymans Ansatz ist der einfachste, aber ich würde ihm eine zusätzliche Anmerkung hinzufügen. Sie sollten die jQuery-Auswahl wirklich zwischenspeichern. Es gibt keinen Grund, $("#input-field-id")zweimal aufzurufen :

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

Die andere Option .val()kann auch eine Funktion als Argument annehmen. Dies hat den Vorteil, dass Sie problemlos an mehreren Eingängen arbeiten können:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
Zwerg
quelle
2
Ich liebe die 'andere Option' - ein schönes Stück FP.
Laher
17

Wenn Sie das Anhängen mehrmals verwenden möchten, möchten Sie möglicherweise eine Funktion schreiben:

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

Nachdem Sie es einfach anrufen können:

jQ_append('my_input_id', 'add this text');
Margus
quelle
Ich kann einem Suchfeld keinen Platzhalter hinzufügen und möchte diesen verwenden und das Feld dann löschen, wenn der Benutzer den Cursor in das Suchfeld setzt. Ist das machbar?
Kevin W.
5

Sie suchen wahrscheinlich nach val ()

kgiannakakis
quelle
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>
Erweitern Sie das Snippet

Nun, als ich dieses Beispiel erstellt habe, war ich irgendwie etwas verwirrt. " ValueText " vs> Current NodeText <Soll nicht .val()mit den Daten des value- Attributs ausgeführt werden? Wie auch immer, ich und du, ich können das früher oder später klären.

Der Punkt für den Moment ist jedoch:

Verwenden Sie beim Arbeiten mit Formulardaten .val () .

Im Umgang mit den meisten schreibgeschützten Daten zwischen den Tags arbeiten, verwenden Sie .text () oder .append () , um Text anzuhängen.

Nadu
quelle
1
Fügt dies etwas Neues hinzu, um die Frage besser zu beantworten? Ich verstehe, dass Sie nur eine Erweiterung vornehmen, aber dies wurde schon seit einiger Zeit beantwortet. Ich möchte nur sicherstellen, dass die Qualität von SO erhalten bleibt.
Kevin Brown
1
Danke fürs Fürsorge - das gefällt mir. Aber ja, Sie haben Recht, es gibt nicht viel Neues, die Essenz bleibt gleich. Als ich jedoch die aktuellen Antworten verdaute, hatte ich das Gefühl, dass etwas an Stil und Implementierung getan werden könnte. Ich habe zuerst geprüft, ob ein Teil des Beitrags bearbeitet werden kann, aber am Ende dachte ich, es sei am besten, einen neuen zu erstellen. Also, was ist neu: * Sie können das Snipped ausführen. * Die Erweiterung hilft viel beim Schreiben von selbstdokumentierendem Code, ohne das Wesentliche abzulenken.
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>

Ausgabe Geben Sie hier die Bildbeschreibung ein

Ram Pukar
quelle