Змініть текст заповнювача за допомогою jQuery


206

Я використовую плагін jQuery placeholder (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>

Хтось може це зрозуміти?


Чи можете ви також надати свій HTML?
Тимофій Аарон

@TimothyAaron Я надав HTML
Krishh

@Blankasaurus - BS не має цього вбудованого. Атрибут Placeholder працює оригінально у сучасних браузерах, але для IE немає полізаповнення
Jannie Theunissen

Відповіді:


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

Скопіюйте та вставте цей код у свій js-файл, це змінить весь текст заповнювача із всього сайту.


1
Ви повинні пропустити- ifзаяву, оскільки зазвичай ви хочете встановити заповнювач незалежно від того, має вхідний елемент значення чи ні. В іншому випадку не відображається заповнювач, якщо користувач спорожняє вхідний елемент.
isnot2bad

99

Ви можете використовувати наступний код для оновлення заповнення місця за id:

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

16

просто ви можете використовувати

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

де, якщо змінна є рядковою, то ви можете використовувати як вище, якщо вона є змінною, замініть її на ім'я типу "змінна" з подвійними лапками.

наприклад: $("#youtextboxid").attr("placeholder", variable); це спрацює.


13

Плагін не виглядає дуже надійним. Якщо ви .placeholder()знову зателефонуєте , він створює новий Placeholderекземпляр, поки події все ще пов'язані зі старим.

Дивлячись на код, схоже, ви могли б зробити:

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

EDIT

placeholderце атрибут HTML5 , здогадуйтесь, хто його не підтримує?

Схоже, ваш плагін не допомагає вам подолати той факт, що IE не підтримує його, тому поки моє рішення працює, ваш плагін не працює. Чому б ти не знайшов такого, що робить.


8

$(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 IEs.

Спробуйте щось подібне: http://archive.plugins.jquery.com/project/input-placeholder


Примітка для ОП: Також зауважте, що подія зміни підключена до поля вибору, а не до введення тексту. $('#serMemdd').change(function () {
Бенджам

Я думаю, що він намагається зробити контекст тексту-заповнювача чутливим на основі DDM serMemdd. Я не знаю.
Джейсон

Так, мені це здається, але в своєму JS він має змінити ситуацію, підключену до textarea, і це не те, де його слід зачепити, якщо це функціонал, який він шукає. Тому я закликав помітку до цієї зміни у вашому коді, якщо він не знав про це.
Бенджам

Оновлено мою відповідь blur (), оскільки .placeholder () обробляє помилки, якщо ви називаєте її не один раз. Вам слід зателефонувати у свій документ, щоб налаштувати його.
Джейсон

<select name = "ddselect" id = "serMemdd">
Джейсон

2

робочий приклад динамічного заповнювача за допомогою 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");
}
}

2

змінити текст заповнювача за допомогою jquery

спробуйте це

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

1

Переміщення першого рядка донизу робить це для мене: 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();
});

... ну атрибут-заповнювач все одно змінюється в Chrome. Коли я перевіряю його в IE, атрибут змінюється, але він насправді не відображає його. Ви впевнені, що це надійний плагін?
Тимофій Аарон

0

Якщо вхід знаходиться у діві, ви можете спробувати це:

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


0

це працювало для мене:

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.