web-dev-qa-db-fra.com

Modification dynamique de l'attribut "espace réservé" des éléments d'entrée HTML5 à l'aide de Javascript

J'essaie de mettre à jour dynamiquement l'attribut HTML5 placeholder d'un champ de texte à l'aide de jQuery.

$("textarea").attr("placeholder", "New placeholder text");

Depuis Firebug, je peux observer que l'attribut placeholder est en train de changer. Mais dans l'élément textarea rendu, il reste le même. Aucune suggestion?

jqueryhtml5placeholder
34
cemregr

Si vous utilisez Firebug, je peux supposer que vous utilisez Firefox, et Firefox ne prend pas encore en charge l'attribut placeholder dans les champs de saisie lui-même.

Détection de fonctionnalité d'espace réservé

Je viens d'essayer Chrome pour Mac et il prend en charge le texte d'espace réservé sur les zones de texte (et les modifications via javascript)

Mise à jour 2015: parfois je gagne en réputation pour cette réponse, je tiens donc à préciser que cela a été accepté comme correct car à l'époque Firefox 3.6 ne supportait pas l'attribut d'espace réservé. La version 4 a ensuite ajouté le support ("corrigé le problème" n'aurait pas été juste), de sorte que le code de l'OP fonctionne comme prévu depuis lors.

15
Minkiele

essaye ça :

$('#inputTextID').attr("placeholder","placeholder text");
51
tilak

Je pense que vous devez le faire:

$("textarea").val('');
$("textarea").attr("placeholder", "New placeholder text");
18
xavok
<label for="myname">Name *</label>
<input type="text" name="myname" id="myname" title="Please enter your name"
       pattern="[A-Za-z ]+, [A-Za-z ]+"
       autofocus required placeholder="Last, First" />

Ensuite, vous souhaitez sélectionner l'espace réservé et remplacer ce texte par le new text that you want to enter.

$("input[placeholder]").attr("placeholder", "This is new text");

Cela remplacera le texte de Last, First à This is new text.

3
NomanJaved

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
overflow