Ändern Sie den Platzhaltertext mit jQuery


206

Ich verwende ein jQuery-Platzhalter-Plugin (https://github.com/danielstocks/jQuery-Placeholder). Ich muss den Platzhaltertext mit der Änderung im Dropdown-Menü ändern. Aber es ändert sich nicht. Hier ist der Code:

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

Mein 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>

Kann jemand das herausfinden?


Können Sie auch Ihr HTML bereitstellen?
Timothy Aaron

@ TimothyAaron Ich habe den HTML
Krishh

@Blankasaurus - BS hat dies nicht eingebaut. Das Platzhalterattribut funktioniert nativ in modernen Browsern, aber es gibt keine Polyfüllung für IE: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Antworten:


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

Kopieren Sie diesen Code und fügen Sie ihn in Ihre js-Datei ein. Dadurch wird der gesamte Platzhaltertext der gesamten Site geändert.


1
Sie sollten die if-statement weglassen , da Sie normalerweise den Platzhalter festlegen möchten, unabhängig davon, ob das Eingabeelement einen Wert hat oder nicht. Andernfalls wird kein Platzhalter angezeigt, wenn der Benutzer das Eingabeelement leert.
isnot2bad

99

Sie können den folgenden Code verwenden, um einen Platzhalter anhand der ID zu aktualisieren:

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

15

einfach können Sie verwenden

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

Wenn eine Variable eine Zeichenfolge ist, können Sie sie wie oben verwenden. Wenn es sich um eine Variable handelt, ersetzen Sie sie durch den Namen "Variable" ohne doppelte Anführungszeichen.

zB: $("#youtextboxid").attr("placeholder", variable); es wird funktionieren.


13

Das Plugin sieht nicht sehr robust aus. Wenn Sie .placeholder()erneut aufrufen , wird eine neue PlaceholderInstanz erstellt, während die Ereignisse noch an die alte gebunden sind.

Wenn Sie sich den Code ansehen, sehen Sie so aus, als könnten Sie Folgendes tun:

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

BEARBEITEN

placeholderist ein HTML5-Attribut , raten Sie mal, wer es nicht unterstützt?

Ihr Plugin scheint Ihnen nicht wirklich dabei zu helfen, die Tatsache zu überwinden, dass der IE es nicht unterstützt. Während meine Lösung funktioniert, funktioniert Ihr Plugin nicht. Warum findest du keinen, der das tut?


8

$(this).val()ist eine Zeichenfolge. Verwenden Sie parseInt($(this).val(), 10)oder überprüfen Sie für '1'. Die Zehn soll die Basis 10 bezeichnen.

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

Oder

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

Andere Plugins

ori hat mich darauf aufmerksam gemacht, dass das von Ihnen verwendete Plugin den HTML-Fehler von IEs nicht überwindet.

Versuchen Sie Folgendes: http://archive.plugins.jquery.com/project/input-placeholder


Hinweis für OP: Beachten Sie auch, dass das Änderungsereignis mit dem Auswahlfeld und nicht mit der Texteingabe verknüpft ist. $('#serMemdd').change(function () {
Benjam

Ich denke, er versucht, den Platzhaltertext basierend auf der serMemdd DDL kontextsensitiv zu machen. Ich weiß nicht.
Jason

Ja, so scheint es mir, aber in seinem JS hat er das Änderungsereignis mit dem Textbereich verknüpft, wo es nicht verknüpft werden sollte, wenn dies die Funktionalität ist, nach der er sucht. Deshalb habe ich eine Notiz zu dieser Änderung in Ihrem Code gerufen, falls er es nicht wusste.
Benjam

Meine Antwort wurde mit blur () aktualisiert, da .placeholder () alles durcheinander bringt, wenn Sie es mehr als einmal aufrufen. Sie sollten es in Ihrem Dokument aufrufen, um es jedoch einzurichten.
Jason

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

2

Arbeitsbeispiel für einen dynamischen Platzhalter mit Javascript und 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

Platzhaltertext mit jquery ändern

Versuche dies

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

1

Wenn Sie Ihre erste Zeile nach unten verschieben, ist dies für mich erledigt: 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();
});

... nun, das Platzhalterattribut ändert sich in Chrome sowieso für mich. Wenn ich es im IE überprüfe, wird das Attribut geändert, aber es wird nicht angezeigt. Sind Sie sicher, dass dies ein zuverlässiges Plugin ist?
Timothy Aaron

0

Wenn sich die Eingabe innerhalb des div befindet, können Sie Folgendes versuchen:

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

0

Versuche dies

$('#Selector_ID').attr("placeholder", "your Placeholder");

0

das hat bei mir funktioniert:

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

aber jetzt funktioniert das nicht:

// 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");
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.