เปลี่ยนข้อความตัวยึดตำแหน่งโดยใช้ jQuery

ฉันใช้ปลั๊กอินตัวยึด jQuery (https://github.com/danielstocks/jQuery-Placeholder) ฉันต้องการเปลี่ยนข้อความตัวยึดตำแหน่งด้วยการเปลี่ยนเมนูแบบเลื่อนลง แต่มันไม่เปลี่ยนแปลง นี่คือรหัส:

$(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 ของฉัน:

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

ใครสามารถคิดออกนี้

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

คัดลอกและวางรหัสนี้ในไฟล์ js ของคุณซึ่งจะเปลี่ยนข้อความตัวยึดทั้งหมดจากเว็บไซต์ทั้งหมด

คุณสามารถใช้รหัสต่อไปนี้เพื่ออัปเดตตัวยึดตำแหน่งโดยใช้ ID:

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

เพียงคุณสามารถใช้

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

โดยที่ถ้าตัวแปรเป็นสตริงคุณสามารถใช้คำสั่งด้านบนถ้าเป็นตัวแปรแทนที่ด้วยชื่อเช่น "variable" โดยไม่ต้องใส่เครื่องหมายอัญประกาศ

เช่น$("#youtextboxid").attr("placeholder", variable); มันจะทำงาน

ปลั๊กอินดูไม่แข็งแกร่งมาก หากคุณโทร.placeholder()อีกครั้งมันจะสร้างPlaceholderอินสแตนซ์ใหม่ในขณะที่กิจกรรมยังคงเชื่อมโยงกับรายการเก่า

ดูโค้ดดูเหมือนว่าคุณจะทำได้:

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

แก้ไข

placeholderเป็นแอตทริบิวต์ HTML5 , เดาที่ไม่ได้สนับสนุนหรือไม่

ปลั๊กอินของคุณดูเหมือนจะไม่ช่วยให้คุณเอาชนะความจริงที่ว่า IE ไม่รองรับดังนั้นในขณะที่โซลูชันของฉันทำงานปลั๊กอินของคุณจะไม่ทำงาน ทำไมคุณไม่พบสิ่งที่ทำ

$(this).val()เป็นสตริง ใช้parseInt($(this).val(), 10)หรือตรวจสอบ '1' สิบคือการแสดงถึงฐาน 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();
        }
    });
});

หรือ

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

โปรแกรมเสริมอื่น ๆ

ori ได้แจ้งให้ฉันทราบแล้วว่าปลั๊กอินที่คุณใช้ไม่สามารถเอาชนะความล้มเหลว HTML ของ IE ได้

ลองทำดังนี้: http://archive.plugins.jquery.com/project/input-placeholder

ตัวอย่างการทำงานของตัวยึดตำแหน่งแบบไดนามิกโดยใช้ Javascript และ 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");
}
}

เปลี่ยนข้อความตัวยึดตำแหน่งโดยใช้ jquery

ลองนี้

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

การย้ายบรรทัดแรกของคุณไปที่ด้านล่างทำให้ฉัน: 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();
});

หากอินพุตอยู่ใน div มากกว่าที่คุณสามารถลองได้:

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

ลองนี้

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

สิ่งนี้ใช้ได้กับฉัน:

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

แต่ตอนนี้มันไม่ทำงาน:

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

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

$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});