Modification Du Texte D'Espace Réservé Sur Le Focus

Est-il une solution simple pour changer le texte d'espace réservé lorsqu'une entrée est au point? Par exemple:

<input type="text" placeholder="Join our mailing list!">

deviendrait ce:

<input type="text" placeholder="enter your email address...">

alors que l'entrée est active.

Gardez à l'esprit IE9 et ci-dessous ne prennent pas en charge placeholder et certains navigateurs effacer le texte lorsque l'entrée reçoit le focus.

OriginalL'auteur Rich | 2012-09-21

  1. 19
    $('input').focus(function() {
    $(this).attr('placeholder', 'enter your email address...')
}).blur(function() {
    $(this).attr('placeholder', 'Join our mailing list!')
})

    http://jsfiddle.net/ByLGs/

    comment faire pour revenir en arrière d'abord de l'espace réservé une fois que l'utilisateur clique quelque part d'autre ?
    Vous avez besoin d'ajouter un blur gestionnaire, tout comme l'extrait de code ci-dessus!

    OriginalL'auteur undefined

  2. 2

    Vous avez cette tagged "jQuery" donc je suppose que vous êtes ouvert à l'utiliser. Voici une façon simple:

    <input type="text" placeholder="Join our mailing list!" title="enter your email address...">​
    $('input').on('focus', function(){
    $(this).data('placeholder', $(this).attr('placeholder')); //Store for blur
    $(this).attr('placeholder', $(this).attr('title'));
}).on('blur', function(){
    $(this).attr('placeholder', $(this).data('placeholder'));
});​

    Démo: http://jsfiddle.net/m6j8m/

    Ce pourrait être raccourci, mais vous obtenez l'idée. De cette façon, vous n'avez pas à garder une trace des valeurs d'attribut dans votre javascript, tout est dans le HTML donc c'est un one-size-fits-all solution. Si vous utilisez title ne convient pas à vos besoins, vous pouvez utiliser data- attributs au lieu ou un autre attribut.

    OriginalL'auteur Wesley Murch