Dołącz tekst do pola wprowadzania

Odpowiedzi:

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" />
Rozwiń fragment

Ayman Hourieh
źródło
5
Przeczytaj również moją odpowiedź na to pytanie - Naprawdę nie ma powodu, aby dzwonić $('#input-field-id')dwa razy ... Jednak bardzo prosta odpowiedź - +1
gnarf
2
Wydaje mi się, że powinna istnieć funkcja, która dodaje do wartości danych wejściowych, tak jak możesz z innerHTML.
Blue Sheep
109

Istnieją dwie możliwości. Podejście Aymana jest najprostsze, ale dodałbym do niego jeszcze jedną nutę. Naprawdę powinieneś buforować wybory jQuery, nie ma powodu, aby dzwonić $("#input-field-id")dwa razy:

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

Druga opcja .val()może również przyjąć funkcję jako argument. Ma to tę zaletę, że można łatwo pracować na wielu wejściach:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
gnarf
źródło
2
Uwielbiam „inną opcję” - niezły kawałek FP.
laher
17

Jeśli planujesz użyć dołączania więcej niż raz, możesz napisać funkcję:

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

Po prostu możesz to nazwać:

jQ_append('my_input_id', 'add this text');
Margus
źródło
Nie mogę dodać symbolu zastępczego do pola wyszukiwania i chciałbym go użyć, a następnie wyczyścić to pole, gdy użytkownik umieści kursor w polu wyszukiwania. Czy jest to wykonalne?
Kevin W.
5

Prawdopodobnie szukasz val ()

kgiannakakis
źródło
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>
Rozwiń fragment

Cóż, tworząc ten przykład, trochę się pogubiłem. " ValueText " vs> Current NodeText <Czy nie .val()powinien działać na danych atrybutu value ? W każdym razie ja i ty, ja, prędzej czy później, możemy to wyjaśnić.

Jednak na razie chodzi o to:

Podczas pracy z danymi formularza użyj .val () .

Gdy mamy do czynienia z danymi tylko do odczytu, znajdującymi się pomiędzy znacznikami, użyj .text () lub .append (), aby dopisać tekst.

Nadu
źródło
1
Czy to dodaje coś nowego, aby lepiej odpowiedzieć na pytanie? Rozumiem, że robisz tylko rozszerzenie, ale odpowiedź na to pytanie trwa od dłuższego czasu. Chcę tylko mieć pewność, że jakość SO jest utrzymana.
Kevin Brown,
1
Dzięki za opiekę - podoba mi się to. Ale tak, masz rację, niewiele nowego, esencja pozostaje taka sama. Jednak kiedy przetrawiałem aktualne odpowiedzi, czułem, że można trochę zrobić ze stylem i wdrożeniem. Najpierw sprawdziłem, czy jakiś post można edytować, ale ostatecznie pomyślałem, że najlepiej będzie zrobić nowy. Więc co nowego: * Możesz uruchomić wycięty plik. * Rozszerzenie bardzo pomaga w pisaniu samodokumentującego się kodu, jednocześnie nie rozpraszając zbyt wiele istoty.
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>

Wynik wprowadź opis obrazu tutaj

Ram Pukar
źródło