Cambia testo segnaposto utilizzando jQuery


206

Sto usando un plugin segnaposto jQuery (https://github.com/danielstocks/jQuery-Placeholder). Devo cambiare il testo del segnaposto con la modifica nel menu a discesa. Ma non sta cambiando. Ecco il codice:

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

Il mio 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>

Qualcuno può capire questa cosa?


Puoi fornire anche il tuo html?
Timothy Aaron,

@TimothyAaron Ho fornito l'HTML
Krishh il

@Blankasaurus - BS non ha questo integrato. L'attributo segnaposto funziona in modo nativo nei browser moderni, ma non esiste un polyfill per IE: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Risposte:


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

Copia e incolla questo codice nel tuo file js, questo cambierà tutto il testo segnaposto dell'intero sito.


1
Dovresti omettere la ifdichiarazione, come di solito vuoi impostare il segnaposto, indipendentemente dal fatto che l'elemento di input abbia o meno un valore. Altrimenti, nessun segnaposto viene visualizzato se l'utente svuota l'elemento di input.
isnot2bad

99

Puoi utilizzare il seguente codice per aggiornare un segnaposto in base all'ID:

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

16

semplicemente puoi usare

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

dove, se la variabile è stringa, è possibile utilizzare come sopra, se è variabile sostituirla con il nome come "variabile" senza virgolette doppie.

es: $("#youtextboxid").attr("placeholder", variable); funzionerà.


13

Il plugin non sembra molto robusto. Se chiami di .placeholder()nuovo, crea una nuova Placeholderistanza mentre gli eventi sono ancora associati a quella precedente.

Guardando il codice, sembra che potresti fare:

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

MODIFICARE

placeholderè un attributo HTML5 , indovina chi non lo supporta?

Il tuo plugin non sembra davvero aiutarti a superare il fatto che IE non lo supporta, quindi mentre la mia soluzione funziona, il tuo plugin non lo fa. Perché non ne trovi uno che lo fa.


8

$(this).val()è una stringa. Utilizzare parseInt($(this).val(), 10)o verificare "1". Il dieci è per indicare la base 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();
        }
    });
});

O

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

Altri plugin

ori ha attirato la mia attenzione sul fatto che il plug-in che si sta utilizzando non supera l'errore HTML di IEs.

Prova qualcosa del genere: http://archive.plugins.jquery.com/project/input-placeholder


Nota per OP: si noti inoltre che l'evento di modifica è collegato alla casella di selezione, non all'immissione di testo. $('#serMemdd').change(function () {
Benjam,

Penso che stia cercando di rendere sensibile il contesto del testo segnaposto in base al DDL serMemdd. Non so.
Jason,

Sì, è quello che mi sembra, ma nel suo JS, ha l'evento di modifica collegato alla textarea, che non è dove dovrebbe essere agganciata se questa è la funzionalità che sta cercando. Ecco perché ho chiamato una nota per quel cambiamento nel tuo codice, nel caso in cui non fosse a conoscenza.
Benjam,

Aggiornato la mia risposta con blur () poiché .placeholder () rovina tutto se lo chiami più di una volta. Dovresti chiamarlo nel tuo doc. Già per configurarlo però.
Jason,

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

2

esempio funzionante di segnaposto dinamico che utilizza Javascript e 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

cambia il testo del segnaposto usando jquery

prova questo

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

1

Spostare la prima riga in basso lo fa per me: 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();
});

... beh, l'attributo segnaposto sta cambiando in Chrome per me comunque. Quando lo controllo in IE, l'attributo viene modificato, ma in realtà non viene visualizzato. Sei sicuro che sia un plugin affidabile?
Timothy Aaron,

0

Se l'ingresso è all'interno del div allora puoi provare questo:

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

0

prova questo

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

0

questo ha funzionato per me:

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

ma ora questo non funziona:

// 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");
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.