Ubah Teks Placeholder menggunakan jQuery


206

Saya menggunakan plugin placeholder jQuery (https://github.com/danielstocks/jQuery-Placeholder). Saya perlu mengubah teks placeholder dengan perubahan pada menu dropdown. Tapi itu tidak berubah. Ini kodenya:

$(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 saya:

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

Adakah yang bisa mengetahui hal ini?


Bisakah Anda memberikan html Anda juga?
Timothy Aaron

@TimothyAaron Saya telah menyediakan HTML
Krishh

@Blankasaurus - BS tidak memiliki ini bawaan. Atribut Placeholder bekerja secara native di browser modern, tetapi tidak ada polyfill untuk IE: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Jawaban:


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

Salin dan tempel kode ini di file js Anda, ini akan mengubah semua teks placeholder dari seluruh situs.


1
Anda harus menghilangkan ifpernyataan-, karena biasanya Anda ingin mengatur placeholder tidak peduli apakah elemen input memiliki nilai atau tidak. Jika tidak, placeholder tidak akan ditampilkan jika pengguna mengosongkan elemen input.
isnot2bad

99

Anda dapat menggunakan kode berikut untuk memperbarui placeholder dengan id:

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

16

cukup Anda bisa menggunakan

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

di mana, jika variabel adalah string maka Anda dapat menggunakan seperti di atas, jika variabel menggantinya dengan nama seperti "variabel" tanpa tanda kutip ganda.

misalnya: $("#youtextboxid").attr("placeholder", variable); itu akan berhasil.


13

Pengaya tidak terlihat sangat kuat. Jika Anda menelepon .placeholder()lagi, itu membuat Placeholdercontoh baru sementara acara masih terikat dengan yang lama.

Melihat kodenya, sepertinya Anda bisa melakukannya:

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

EDIT

placeholderitu atribut HTML5 , tebak siapa yang tidak mendukungnya?

Plugin Anda sepertinya tidak benar-benar membantu Anda mengatasi fakta bahwa IE tidak mendukungnya, jadi sementara solusi saya berfungsi, plugin Anda tidak. Mengapa Anda tidak menemukannya?


8

$(this).val()adalah sebuah string. Gunakan parseInt($(this).val(), 10)atau periksa '1'. Sepuluh adalah untuk menunjukkan basis 10.

$(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();
        }
    });
});

Atau

$(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();
        }
    });
});

Plugin lainnya

ori telah menarik perhatian saya bahwa plugin yang Anda gunakan tidak mengatasi kegagalan HTML IEs.

Coba sesuatu seperti ini: http://archive.plugins.jquery.com/project/input-placeholder


Catatan untuk OP: Perhatikan juga bahwa acara perubahan dikaitkan ke kotak pilih, bukan input teks. $('#serMemdd').change(function () {
Benjam

Saya pikir dia mencoba untuk membuat konteks teks placeholder sensitif berdasarkan pada serMemdd DDL. Saya tidak tahu.
Jason

Ya, seperti itulah rasanya bagi saya, tetapi dalam JS-nya, ia memiliki acara perubahan yang terhubung ke textarea, yang tidak berada di tempat yang seharusnya dikaitkan jika itu adalah fungsi yang ia kejar. Itu sebabnya saya memanggil catatan untuk perubahan kode Anda, kalau-kalau dia tidak sadar.
Benjam

Memperbarui jawaban saya dengan blur () sejak .placeholder () mengacaukan semuanya jika Anda menyebutnya lebih dari satu kali. Anda harus memanggilnya di doc Anda. Sudah untuk mengaturnya.
Jason

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

2

contoh kerja placeholder dinamis menggunakan Javascript dan Jquery 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

ubah teks placeholder menggunakan jquery

coba ini

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

1

Memindahkan baris pertama Anda ke bawah akan melakukannya untuk saya: 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();
});

... well, atribut placeholder berubah di Chrome untuk saya. Ketika saya memeriksanya di IE, atributnya berubah, tetapi sebenarnya tidak menampilkannya. Apakah Anda yakin itu plugin yang andal?
Timothy Aaron

0

Jika input ada di dalam div daripada Anda dapat mencoba ini:

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


0

ini bekerja untuk saya:

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

tapi sekarang ini tidak berfungsi:

// 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");
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.