Изменить заполнитель текста с помощью jQuery


206

Я использую плагин-заполнитель 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>

Кто-нибудь может понять это?


Можете ли вы также предоставить свой HTML?
Тимоти Аарон

@TimothyAaron Я предоставил HTML
Krishh

@Blankasaurus - BS не имеет встроенного атрибута. В современных браузерах атрибут Placeholder работает изначально, но для IE нет многогранника: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Ответы:


368
$(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-statement, так как обычно вы хотите установить заполнитель независимо от того, имеет ли элемент input значение или нет. В противном случае заполнитель не отображается, если пользователь очищает элемент ввода.
isnot2bad

99

Вы можете использовать следующий код для обновления заполнителя по идентификатору:

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

РЕДАКТИРОВАТЬ

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 в IE.

Попробуйте что-то вроде этого: http://archive.plugins.jquery.com/project/input-placeholder


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

Я думаю, что он пытается сделать контекст текста чувствительным, основываясь на DDL serMemdd. Понятия не имею.
Джейсон

Да, это то, что мне кажется, но в его JS у него есть событие change, привязанное к 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 для меня меняется в Chrome. Когда я проверяю это в IE, атрибут меняется, но на самом деле он не отображается. Вы уверены, что это надежный плагин?
Тимоти Аарон

0

Если вход находится внутри div, вы можете попробовать это:

$('#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.