JQuery kullanarak Yer Tutucu Metni Değiştirme


206

Bir jQuery yer tutucu eklentisi kullanıyorum (https://github.com/danielstocks/jQuery-Placeholder). Açılır menüdeki değişiklikle yer tutucu metni değiştirmem gerekiyor. Ama değişmiyor. İşte kod:

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
});

Html'im:

<div class="filterbox">
        <select name="ddselect" id="serMemdd">
            <option value="1" selected="selected">Search by Name</option>
            <option value="2">Search by ID</option>
            <option value="3">Search by Location</option>
        </select>
        <input id="serMemtb" type="text" style="width: 490px" placeholder="Type a name    (Lastname, Firstname)" />
        <input id="seMemBut" type="button" value="Search" />
    </div>

Birisi bunu çözebilir mi?


Html'inizi de sağlayabilir misiniz?
Timothy Aaron

@TimothyAaron HTML'yi
sağladım

@Blankasaurus - BS bu yerleşik yok tutucu niteliği modern tarayıcılarda yerel olarak çalışır, ancak IE için hiçbir polyfill yoktur. Github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Yanıtlar:


367
$(document).ready(function(){ 
  $('form').find("input[type=textarea], input[type=password], textarea").each(function(ev)
  {
      if(!$(this).val()) { 
     $(this).attr("placeholder", "Type your answer here");
  }
  });
});

Bu kodu kopyalayıp js dosyanıza yapıştırın; bu, tüm yer tutucu metni tüm siteden değiştirir.


1
ifGirdi öğesi bir değere sahip olsun ya da olmasın, genellikle yer tutucuyu ayarlamak istediğiniz için -statement öğesini atlamalısınız. Aksi takdirde, kullanıcı giriş öğesini boşaltırsa yer tutucu gösterilmez.
isnot2bad

99

Bir yer tutucuyu kimliğe göre güncellemek için aşağıdaki kodu kullanabilirsiniz:

$("#serMemtb").attr("placeholder", "Type a Location").val("").focus().blur();

16

sadece kullanabilirsin

$("#yourtextboxid").attr("placeholder", "variable");

Burada değişken değişkeni dize ise yukarıdaki gibi kullanabilirsiniz, değişken ise çift değişkenli "değişken" adı ile değiştirin.

örneğin: $("#youtextboxid").attr("placeholder", variable); işe yarayacaktır.


13

Eklenti çok sağlam görünmüyor. .placeholder()Tekrar ararsanız , Placeholderolaylar eskisine bağlıyken yeni bir örnek oluşturur .

Koda bakarak, yapabileceğiniz gibi görünüyor:

$("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();

DÜZENLE

placeholderBir olan HTML5 niteliği , onu destekleyen gitmeyecek olan tahmin?

Eklentiniz IE'nin desteklemediği gerçeğini aşmanıza yardımcı görünmüyor, bu yüzden çözümüm çalışırken eklentiniz desteklemiyor. Neden bir tane bulmuyorsun.


8

$(this).val()bir dizedir. parseInt($(this).val(), 10)'1'i kullanın veya kontrol edin. On üs 10'u gösterecek.

$(function () {
    $('input[placeholder], textarea[placeholder]').blur();
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == '1') {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == '2') {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == '3') {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

Veya

$(function () {
    $('input[placeholder], textarea[placeholder]').placeholder();
    $('#serMemdd').change(function () {
        var k = parseInt($(this).val(), 10);
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").blur();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").blur();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").blur();
        }
    });
});

Diğer Eklentiler

ori benim kullandığım eklentinin IE HTML hatası üstesinden gelmedi dikkatimi çekti.

Bunun gibi bir şey deneyin: http://archive.plugins.jquery.com/project/input-placeholder


OP için not: change olayının metin girişine değil seçim kutusuna bağlandığını unutmayın. $('#serMemdd').change(function () {
Benjam

Sanırım yer tutucu metin bağlamını serMemdd DDL'ye dayalı hale getirmeye çalışıyor. Bilmiyorum.
Jason

Evet, bana öyle geliyor, ama JS'sinde, textarea'ya bağlı değişiklik olayı var, bu da peşinde olan işlevsellik ise bağlanması gereken yer değil. Bu yüzden farkında olmasa bile kodunuzdaki bu değişikliğe bir not yazdım.
Benjam

Birden fazla kez çağırırsanız .placeholder () öğelerini karıştırdığı için yanıtımı blur () ile güncelledi. Belgenizde çağırmalısınız.
Jason

<select name = "ddselect" id = "serMemdd">
Jason

2

Javascript ve Jquery kullanarak dinamik yer tutucunun çalışma örneği http://jsfiddle.net/ogk2L14n/1/

<input type="text" id="textbox">
 <select id="selection" onchange="changeplh()">
     <option>one</option>
     <option>two</option>
     <option>three</option>
    </select>

function changeplh(){
    debugger;
 var sel = document.getElementById("selection");
    var textbx = document.getElementById("textbox");
    var indexe = sel.selectedIndex;

    if(indexe == 0) { 
     $("#textbox").attr("placeholder", "age");

}
       if(indexe == 1) { 
     $("#textbox").attr("placeholder", "name");
}
}

2

jquery kullanarak yer tutucu metni değiştirme

bunu dene

$('#selector').attr("placeholder", "Type placeholder");

1

İlk satırınızı aşağıya taşımak benim için yapar: http://jsfiddle.net/tcloninger/SEmNX/

$(function () {
    $('#serMemdd').change(function () {
        var k = $(this).val();
        if (k == 1) {
            $("#serMemtb").attr("placeholder", "Type a name (Lastname, Firstname)").placeholder();
        }
        else if (k == 2) {
            $("#serMemtb").attr("placeholder", "Type an ID").placeholder();
        }
        else if (k == 3) {
            $("#serMemtb").attr("placeholder", "Type a Location").placeholder();
        }
    });
    $('input[placeholder], textarea[placeholder]').placeholder();
});

... Eh, yer tutucu özelliği Chrome'da zaten benim için değişiyor. IE'de kontrol ettiğimde öznitelik değişiyor, ama aslında göstermiyor. Bunun güvenilir bir eklenti olduğundan emin misiniz?
Timothy Aaron

0

Giriş div içinde bulunuyorsa, bunu deneyebilirsiniz:

$('#div_id input').attr("placeholder", "placeholder text");

0

bunu dene

$('#Selector_ID').attr("placeholder", "your Placeholder");

0

bu benim için çalıştı:

jQuery('form').attr("placeholder","Wert eingeben");

ama şimdi bu işe yaramıyor:

// Prioritize "important" elements on medium.
            skel.on('+medium -medium', function() {
                jQuery.prioritize(
                    '.important\\28 medium\\29',
                    skel.breakpoint('medium').active
                );
            });

0
$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});

0
$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.