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?

Krishh
sumber
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.

Neshat Khan
sumber
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();
Pencipta
sumber
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.

Krish
sumber
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?

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

Jason
sumber
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");
}
}
meluap
sumber
2

ubah teks placeholder menggunakan jquery

coba ini

$('#selector').attr("placeholder", "Type placeholder");
Cinta Kumar
sumber
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();
});
Timothy Aaron
sumber
... 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");
Cinta Kumar
sumber
0

coba ini

$('#Selector_ID').attr("placeholder", "your Placeholder");
Cinta Kumar
sumber
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
                );
            });

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