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źć?

Krishh
źródło
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.

Neshat Khan
źródło
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();
Twórca
źródło
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.

Krish
źródło
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.

lub ja
źródło
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

Jason
źródło
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");
}
}
przelewowy
źródło
2

zmień tekst zastępczy za pomocą jquery

Spróbuj tego

$('#selector').attr("placeholder", "Type placeholder");
Uwielbiam Kumar
źródło
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();
});
Timothy Aaron
źródło
... 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");
Uwielbiam Kumar
źródło
0

Spróbuj tego

$('#Selector_ID').attr("placeholder", "your Placeholder");
Uwielbiam Kumar
źródło
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
                );
            });

źródło
0
$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});
Bunty Kazi
źródło
0
$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});
Bunty Kazi
źródło