Zmień tekst zastępczy za pomocą jQuery


206

Korzystam z wtyczki symbolu zastępczego jQuery (https://github.com/danielstocks/jQuery-Placeholder). Muszę zmienić tekst zastępczy ze zmianą menu rozwijanego. Ale to się nie zmienia. Oto kod:

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

Mój 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>

Czy ktoś może to rozgryźć?


Czy możesz również podać swój kod HTML?
— Timothy Aaron,

@TimothyAaron Udostępniłem HTML
— Krishh

@Blankasaurus - BS nie ma tego wbudowanego. Atrybut zastępczy działa natywnie w nowoczesnych przeglądarkach, ale dla IE nie ma wypełniania: github.com/twitter/bootstrap/issues/2401
— Jannie Theunissen

Odpowiedzi:


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

Skopiuj i wklej ten kod do pliku js, to zmieni cały tekst zastępczy z całej witryny.


1
Powinieneś pominąć if-statement, ponieważ zwykle chcesz ustawić symbol zastępczy bez względu na to, czy element wejściowy ma wartość, czy nie. W przeciwnym razie nie zostanie wyświetlony symbol zastępczy, jeśli użytkownik opróżni element wejściowy.
— isnot2bad

99

Aby zaktualizować symbol zastępczy według identyfikatora, możesz użyć następującego kodu:

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

16

po prostu możesz użyć

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

gdzie, jeśli zmienna jest ciągiem, możesz użyć jak wyżej, jeśli jest zmienna, zastąp ją nazwą „zmienną” bez podwójnych cudzysłowów.

np .: $("#youtextboxid").attr("placeholder", variable); zadziała.


13

Wtyczka nie wygląda bardzo solidnie. .placeholder()Ponowne wywołanie spowoduje utworzenie nowej Placeholderinstancji, podczas gdy zdarzenia będą nadal powiązane ze starą.

Patrząc na kod, wygląda na to, że możesz:

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

EDYTOWAĆ

placeholderjest atrybutem HTML5 , zgadnij kto go nie obsługuje?

Twoja wtyczka naprawdę nie pomaga ci przezwyciężyć faktu, że IE jej nie obsługuje, więc chociaż moje rozwiązanie działa, twoja wtyczka nie. Dlaczego nie znajdziesz takiego.


8

$(this).val()jest ciągiem. Użyj parseInt($(this).val(), 10)lub sprawdź „1”. Dziesięć ma oznaczać bazę 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();
        }
    });
});

Lub

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

Inne wtyczki

ori zwróciło moją uwagę, że wtyczka, której używasz, nie usuwa awarii HTML IEs.

Spróbuj czegoś takiego: http://archive.plugins.jquery.com/project/input-placeholder


Uwaga dla OP: Należy również pamiętać, że zdarzenie zmiany jest zaczepione do pola wyboru, a nie do wprowadzania tekstu. $('#serMemdd').change(function () {
— Benjam

Myślę, że próbuje uczynić tekst zastępczy wrażliwym na kontekst na podstawie DDL serMemdd. Nie wiem.
— Jason

Tak, tak mi się wydaje, ale w swoim JS zdarzenie zmiany jest podłączone do obszaru tekstowego, a nie jest to miejsce, w którym powinno być ono uzależnione, jeśli taka jest jego funkcjonalność. Właśnie dlatego zawołałem notatkę o tej zmianie w twoim kodzie, na wypadek, gdyby nie był tego świadomy.
— Benjam

Zaktualizowałem moją odpowiedź rozmyciem (), ponieważ .placeholder () nie działa poprawnie, jeśli wywołasz ją więcej niż jeden raz. Powinieneś to nazwać w swoim doc.ready, aby go skonfigurować.
— Jason

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

2

przykład działania dynamicznego symbolu zastępczego przy użyciu Javascript i 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

zmień tekst zastępczy za pomocą jquery

Spróbuj tego

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

1

Przeniesienie pierwszego wiersza na dół robi to dla mnie: 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();
});

... cóż, atrybut zastępczy i tak się dla mnie zmienia w Chrome. Kiedy sprawdzam to w IE, atrybut się zmienia, ale tak naprawdę go nie wyświetla. Czy na pewno jest to niezawodna wtyczka?
— Timothy Aaron,

0

Jeśli dane wejściowe znajdują się w div, możesz spróbować:

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


0

to działało dla mnie:

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

ale teraz to nie działa:

// 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");
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.