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?

Krishh
la source
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.

Neshat Khan
la source
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();
Créateur
la source
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.

Krish
la source
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.

ou Je
la source
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

Jason
la source
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");
}
}
débordement
la source
2

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

essaye ça

$('#selector').attr("placeholder", "Type placeholder");
Love Kumar
la source
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();
});
Timothy Aaron
la source
... 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");
Love Kumar
la source
0

essaye ça

$('#Selector_ID').attr("placeholder", "your Placeholder");
Love Kumar
la source
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
                );
            });

la source
0
$(document).ready(function(){ 
  $('form').find("input[type=search]").each(function(ev)
  {
     $(this).attr("placeholder", "Search Whatever you want");
  });
});
Bunty Kazi
la source
0
$(document).ready(function(){ 
     $("input[type=search]").attr("placeholder","this is a test");
});
Bunty Kazi
la source