web-dev-qa-db-fra.com

Modifier le texte de substitution à l'aide de jQuery

J'utilise un plugin d'espace réservé jQuery (https://github.com/danielstocks/jQuery-Placeholder). Je dois changer le texte de l'espace réservé avec le changement dans le menu déroulant. Mais cela ne change pas. Voici le 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();
        }
    });
});

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

Quelqu'un peut-il comprendre cela?

jqueryjquery-plugins
182
Krishh
$(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");
  }
  });
});

Copiez et collez ce code dans votre fichier js, cela modifiera tout le texte d’espace réservé de l’ensemble du site.

333
Neshat Khan

Vous pouvez utiliser le code suivant pour mettre à jour un espace réservé par identifiant:

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

Le plugin n'a pas l'air très robuste. Si vous appelez à nouveau .placeholder(), il crée une nouvelle instance Placeholder alors que les événements sont toujours liés à l'ancienne.

En regardant le code, il semble que vous pourriez faire:

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

EDIT

placeholder est un attribut HTML5 , devinez qui ne le supporte pas?

Votre plugin ne semble pas vraiment vous aider à surmonter le fait que IE ne le supporte pas. Par conséquent, bien que ma solution fonctionne, votre plugin ne le fait pas. Pourquoi n'en trouvez-vous pas un?.

12
ori

vous pouvez simplement utiliser

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

où, si variable est une chaîne, vous pouvez utiliser comme ci-dessus, si c'est variable, remplacez-le par le nom tel que "variable" sans les guillemets doubles.

par exemple: $("#youtextboxid").attr("placeholder", variable); cela fonctionnera.

11
Krish

$(this).val() est une chaîne. Utilisez parseInt($(this).val(), 10) ou vérifiez '1'. Le dix est à noter 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();
        }
    });
});

Ou

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

Autres plugins

ori a attiré mon attention sur le fait que le plug-in que vous utilisez ne surmonte pas l'échec d'IEs HTML.

Essayez quelque chose comme ceci: http://archive.plugins.jquery.com/project/input-placeholder

8
Jason

exemple de travail d'un espace réservé dynamique utilisant Javascript et 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
overflow

Déplacer votre première ligne vers le bas le fait pour moi: 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();
});
1
Timothy Aaron

changer le texte de substitution en utilisant jquery

essayez ceci

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

Si l'entrée est à l'intérieur de la div, vous pouvez essayer ceci:

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