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.