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.