Modifier le texte de l'espace réservé à l'aide de jQuery


206

J'utilise un plugin d'espace réservé jQuery (https://github.com/danielstocks/jQuery-Placeholder). J'ai besoin de 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?


Pouvez-vous également fournir votre code HTML?
Timothy Aaron

@TimothyAaron J'ai fourni le code HTML
Krishh

@Blankasaurus - BS n'a pas cela intégré. L'attribut d'espace réservé fonctionne nativement dans les navigateurs modernes, mais il n'y a pas de polyfill pour IE: github.com/twitter/bootstrap/issues/2401
Jannie Theunissen

Réponses:


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

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


1
Vous devez omettre la ifdéclaration-, car vous souhaitez généralement définir l'espace réservé, que l'élément d'entrée ait ou non une valeur. Sinon, aucun espace réservé n'est affiché si l'utilisateur vide l'élément d'entrée.
isnot2bad

99

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

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

16

vous pouvez simplement utiliser

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

où, si variable est une chaîne, vous pouvez utiliser comme ci-dessus, si elle est variable, remplacez-la par le nom comme "variable" sans guillemets.

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


13

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

En regardant le code, on dirait que vous pourriez faire:

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

ÉDITER

placeholderest un attribut HTML5 , devinez qui ne le prend pas en charge?

Votre plugin ne semble pas vraiment vous aider à surmonter le fait que IE ne le supporte pas, donc pendant que ma solution fonctionne, votre plugin ne le fait pas. Pourquoi n'en trouvez-vous pas un qui le fait.


8

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

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 plugin que vous utilisez ne résout pas l'échec HTML d'IE.

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


Remarque pour OP: Notez également que l'événement de modification est lié à la zone de sélection, pas à la saisie de texte. $('#serMemdd').change(function () {
Benjam

Je pense qu'il essaie de rendre le texte de l'espace réservé sensible au contexte sur la base du serMemdd DDL. Je ne sais pas.
Jason

Oui, c'est ce que cela me semble, mais dans son JS, il a l'événement de changement accroché à la zone de texte, qui n'est pas là où il devrait être accroché si c'est la fonctionnalité qu'il recherche. C'est pourquoi j'ai appelé une note à ce changement dans votre code, au cas où il ne serait pas au courant.
Benjam

Mise à jour de ma réponse avec blur () car .placeholder () gâche tout si vous l'appelez plus d'une fois. Vous devez cependant l'appeler dans votre document pour le configurer.
Jason

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

2

exemple pratique d'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

modifier le texte de l'espace réservé à l'aide de jquery

essaye ça

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

1

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

... eh bien, l'attribut d'espace réservé change pour moi de toute façon dans Chrome. Lorsque je le vérifie dans IE, l'attribut est modifié, mais il ne l'affiche pas réellement. Êtes-vous sûr que c'est un plugin fiable?
Timothy Aaron

0

Si l'entrée se trouve à l'intérieur du div, vous pouvez essayer ceci:

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

0

essaye ça

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

0

cela a fonctionné pour moi:

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

mais maintenant ça ne marche pas:

// 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");
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.