Giriş alanına metin ekleyin

108

Bir giriş alanına biraz metin eklemem gerekiyor ...

jquery text append

— Kevin Brown
kaynak

3

olası yinelenen İş'in mümkün JQuery içinde ".value + =" yapmalı?

— 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" />

Snippet'i genişlet

— Ayman Hourieh
kaynak

5

Lütfen bu soruya verdiğim yanıtı da okuyun - İki $('#input-field-id')kez aramak zorunda

— kalmanıza

2

İle yapabileceğiniz gibi bir girdinin değerini artıran bir işlev olması gerektiğini düşünüyorum innerHTML.

— Blue Sheep

109

İki seçenek var. Ayman'ın yaklaşımı en basit olanıdır, ancak ona bir not daha ekleyeceğim. JQuery seçimlerini gerçekten önbelleğe almalısınız, $("#input-field-id")iki kez aramak için hiçbir neden yoktur :

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

Diğer seçenek, .val()bağımsız değişken olarak bir işlevi de alabilir. Bu, birden çok girdi üzerinde kolayca çalışma avantajına sahiptir:

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

— gnarf
kaynak

2

'Diğer seçeneği' sevmek - güzel bir FP.

— laher

17

Eklemeyi birden fazla kullanmayı planlıyorsanız, bir fonksiyon yazmak isteyebilirsiniz:

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

Sonra onu arayabilirsin:

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

— Margus
kaynak

Bir arama kutusuna yer tutucu ekleyemiyorum ve bunu kullanmak ve ardından kullanıcı arama kutusuna imleci getirdiğinde kutunun temiz kalmasını istiyorum. Bu yapılabilir mi?

— Kevin W.

5

Muhtemelen val () arıyorsunuz

— kgiannakakis
kaynak

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>

Snippet'i genişlet

Bu örneği oluştururken bir şekilde kafam biraz karıştı. " ValueText " vs> Geçerli NodeText < değer özniteliğinin .val()verileri üzerinde çalıştırılması beklenmiyor mu? Her neyse, ben ve sen ben bunu er ya da geç çözebiliriz.

Ancak şimdilik nokta şudur:

Form verileriyle çalışırken .val () kullanın .

Etiketleri arasında çoğunlukla salt okunur verilerle uğraşırken, metin eklemek için .text () veya .append () kullanın.

— Nadu
kaynak

1

Bu, soruyu daha iyi yanıtlamak için yeni bir şey ekler mi? Anladığım kadarıyla sadece bir uzatma yaptınız, ancak bu oldukça uzun bir süredir yanıtlandı. SO kalitesinin korunduğundan emin olmak istiyorum.

— Kevin Brown

1

İlgilendiğin için teşekkürler - bunu beğendim. Ama evet haklısın pek yeni bir şey yok, öz aynı kalır. Ancak mevcut cevapları sindirdiğimde, stil ve uygulama konusunda biraz yapılabileceğini hissettim. Önce gönderinin bir kısmının düzenlenip düzenlenemeyeceğini kontrol ettim, ancak sonunda yenisini yapmanın en iyisi olduğunu düşündüm. Peki yeni olan: * Kesilmiş olanı çalıştırabilirsiniz. * Uzantı, özün çok fazla dikkatini dağıtmazken, kendi kendini belgeleyen kod yazma yolunda çok yardımcı olur.

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

Çıktı

— Ram Pukar
kaynak