Tambahkan teks ke bidang masukan

Jawaban:

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" />
Luaskan cuplikan

Ayman Hourieh
sumber
5
Harap baca jawaban saya untuk pertanyaan ini juga - Tidak ada alasan untuk menelepon $('#input-field-id')dua kali ... Jawaban yang sangat sederhana - +1
gnarf
2
Saya merasa seperti harus ada fungsi yang menambah nilai input seperti yang Anda bisa dengan innerHTML.
Blue Sheep
109

Ada dua pilihan. Pendekatan Ayman adalah yang paling sederhana, tetapi saya akan menambahkan satu catatan tambahan padanya. Anda harus benar-benar menyimpan pilihan jQuery dalam cache, tidak ada alasan untuk memanggil $("#input-field-id")dua kali:

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

Opsi lainnya, .val()juga dapat mengambil fungsi sebagai argumen. Ini memiliki keuntungan untuk dengan mudah mengerjakan banyak input:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});
gnarf
sumber
2
Menyukai 'opsi lain' - sedikit FP.
laher
17

Jika Anda berencana untuk menggunakan appending lebih dari sekali, Anda mungkin ingin menulis sebuah fungsi:

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

Setelah Anda bisa menyebutnya:

jQ_append('my_input_id', 'add this text');
Margus
sumber
Saya tidak dapat menambahkan placeholder ke kotak pencarian dan ingin menggunakan ini dan kemudian mengosongkan kotak saat pengguna meletakkan kursor di kotak pencarian. Apakah ini bisa dilakukan?
Kevin W.
5

Anda mungkin mencari val ()

kgiannakakis
sumber
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>
Luaskan cuplikan

Nah saat membuat contoh ini saya entah bagaimana menjadi sedikit bingung. " ValueText " vs> NodeText Saat Ini <Bukankah .val()seharusnya berjalan pada data atribut nilai ? Pokoknya aku dan kamu, aku mungkin akan membereskan ini cepat atau lambat.

Namun intinya untuk saat ini adalah:

Saat bekerja dengan data formulir, gunakan .val () .

Saat menangani sebagian besar data hanya baca di antara tag, gunakan .text () atau .append () untuk menambahkan teks.

Nadu
sumber
1
Apakah ini menambahkan sesuatu yang baru untuk menjawab pertanyaan dengan lebih baik? Saya mengerti Anda baru saja membuat perpanjangan, tetapi ini telah dijawab cukup lama. Hanya ingin memastikan kualitas SO dijunjung.
Kevin Brown
1
Terima kasih telah peduli - Saya suka itu. Tapi ya Anda benar, tidak banyak yang baru intinya tetap sama. Namun ketika saya mencerna jawaban saat ini, saya merasa ada sedikit yang bisa dilakukan tentang gaya dan penerapannya. Saya pertama kali memeriksa apakah beberapa posting dapat diedit, tetapi pada akhirnya saya pikir yang terbaik adalah membuat yang baru. Jadi apa yang baru: * Anda dapat menjalankan snipped. * Ekstensi sangat membantu dalam proses menulis kode yang mendokumentasikan diri, sementara tidak terlalu banyak mengganggu intinya.
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>

Keluaran masukkan deskripsi gambar di sini

Ram Pukar
sumber