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.