Placeholder, HTML et JavaScript

Version imprimable

02/09/2014, 16h49
budfoxob

Placeholder, HTML et JavaScript

Bonjour à tous,

Je vous sollicite une nouvelle car j'aurai un grand besoin de votre aide.
Voila un petit détail sur lequel je bloque et n'arrive pas à trouver la solution.

Sur mon fichier index, j'ai un formulaire d'inscription de compte démo, la facile,
mon problème vient du placeholder dans le formulaire, j'aimerai que lorsque l'utilisateur choisisse son pseudo, il y ait déjà dans l'input DEMO-(et la il rentre son pseudo),
avec placeholder je peux mettre DEMO- mais au clic il disparait ou alors se supprime,

j'aimerai donc pouvoir si c'est possible que l'utilisateur est obligation d'écrire juste après DEMO- , sans qu'il puisse le supprimer ni le faire disparaitre au clic.

Auriez vous une petite astuce à me conseiller?

Merci beaucoup par avance de votre aide.
04/09/2014, 08h20
crozet.magenta

c'est pas un placeholder qu'il faut dans ce cas c'est value

Code:

<input type="text" value="demo-">

mais l'utilisateur peut effacer
sinon, ce que tu peux également faire c'est ça :

Code:

demo-<input type='text'>

et dans ton traitement de formulaire tu ajoutes "demo-" avant le nom rentré
13/09/2014, 16h49
budfoxob

Bonjour crozet.magenta,
et merci pour ton aide,

j'ai finalement choisit la facilité en suivant ton conseil,
j'ai mis demo-<input type='text'> et tout fonctionnement parfaitement :)

Donc un grand merci à toi

placeholder sur IE8 et inférieur

Si ça peut aider quelques uns, :D voici un script en Jquery qui permet de simuler la fonction placeholder HTML5 à l’aide de l’attribut value ( vu que placeholder html5 ne marche pas sur IE8 et inferieur )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var clearField = function ( field ) {
        if ( $(field).attr('title') == $(field).val()) {
            $(field).val('');
        };
    };
    var restoreField = function ( field ) {
        if ( $(field).val() == '') {
            $(field).val( $(field).attr('title') );
        };
    };
    $('.inputField').focus ( function () {
        clearField (this);
    });
    $('.inputField').blur ( function () {
        restoreField (this);
    });