anhängen Text Eingabefeld

166

$('#input-field-id').val($('#input-field-id').val() + 'more text');

Quelle

2009-05-08 20:50:22

+0

Vielen Dank! –

+3

Bitte lesen Sie auch meine Antwort zu dieser Frage - Es gibt wirklich keinen Grund, '$ ('# Eingabefeld-ID')' zweimal zu nennen ... Sehr einfache Antwort - +1 – gnarf

+2

Ich fühle mich wie dort sollte sei eine Funktion, die den Wert einer Eingabe erhöht, wie du es mit dem 'innerHTML' machen kannst. –

5

Sie vermutlich suchen val()

Quelle

2009-05-08 20:51:17 kgiannakakis

17

Wenn Sie mehr verwenden möchten anhängt dann einmal, Sie vielleicht möchten 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:

jQ_append('my_input_id', 'add this text');

Quelle

2009-05-08 21:00:58 Margus

+0

Ich kann keinen Platzhalter zu einem Suchfeld hinzufügen und möchte dies verwenden und dann das Feld deaktivieren, wenn Benutzer den Cursor in Suchfeld setzt. Ist das machbar? – KevinOrin

92

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

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

Die andere Option kann .val() auch eine Funktion als Argument nehmen. Dies hat den advantange leicht arbeiten an mehreren Eingängen:

$("input").val(function(index, val) { 
    return val + "more text"; 
});

Quelle

2011-07-30 20:39:38 gnarf

+2

Die "andere Option" lieben - schönes Stück FP. – laher

+1

Dies sollte die akzeptierte Antwort BTW sein. – MoniXx

+0

Die andere Meinung riecht cool – Jim

3

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

 
\t // And that's how to use it: 
 
\t $('#SomeID') 
 
\t \t .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>

Nun bei der Erstellung dieses Beispiel bekam ich irgendwie ein wenig verwirrt. "" vs>Aktueller NodeText < Soll nicht .val() auf die Daten des Werts Attribut ausgeführt werden? Jedenfalls können ich und du mich früher oder später aufklären.

aber jetzt ist der Punkt:

Wenn mit Formulardaten arbeiten.val() verwenden.

Wenn es mit den meist lasen nur Daten zu tun zwischen dem Tag Verwendung .text() oder .append() Text anfügen.

Quelle

2016-08-12 14:42:23 Nadu

+1

Fügt dies etwas neues, um die Frage besser zu beantworten? Ich verstehe, dass Sie nur eine Erweiterung machen, aber das ist seit einiger Zeit beantwortet. Ich möchte nur sicherstellen, dass die Qualität von SO aufrechterhalten wird. –

+1

Danke fürsorglich - das gefällt mir. Aber ja, du hast recht, es gibt nicht viel Neues, die Essenz bleibt gleich. Als ich jedoch die aktuellen Antworten verdaute, war ich der Meinung, dass etwas an Stil und Umsetzung zu ändern sein könnte. Ich habe zuerst überprüft, ob ein Teil des Beitrags bearbeitet werden kann, aber am Ende dachte ich, es sei das Beste, einen neuen zu erstellen. Also was ist neu: * Sie können das Snipped ausführen. * Die Erweiterung hilft viel auf dem Weg, selbst-dokumentierenden Code zu schreiben, ohne zu viel von der Essenz 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

Quelle

2016-11-11 09:42:57

anhängen Text Eingabefeld

Antwort

Verwandte Themen