JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<form action="#" method="post">
    <fieldset>
        <legend>Votre identité</legend>
        <p><label>Nom</label>
            <input type="text" value="Doe" /></p>
        <p><label>Prénom</label>
            <input type="text" value="John" /></p>
        <p><label>Login</label>
            <input type="text" /></p>
        <p><label>Mot de passe</label>
            <input type="password" value="password" /></p>
    </fieldset>
</form>    
<p>Et dans un autre genre :</p>
<form action="#" method="post">
    <fieldset>
        <legend>Votre identité</legend>
        <p><label>Nom</label>
            <input type="text" title="Veuillez entrer votre nom " /></p>
        <p><label>Prénom</label>
            <input type="text" title="Veuillez entrer votre prénom" /></p>
        <p><label>Login</label>
            <input type="text" title="Veuillez entrer votre login" /></p>
        <p><label>Mot de passe</label>
            <input type="password" title="password" /></p>
    </fieldset>
</form>

CSS

p {margin:0 0 10px}
fieldset{
    padding:10px;
    border:1px solid #ccc;
    margin-bottom:1.5em;
}
label{
    display:block;
    cursor:pointer;
}

input,
textarea{
    font-family:inherit;
    font-size:1em;
    line-height:1.5;
}

JavaScript

$("input[type=text]").each(function() {
    var storedValue = $(this).attr("value");
    $(this).data("value", {
        datavalue: storedValue
    });
    $(this).focus(function() {
        if ($(this).val() == storedValue) {
            $(this).val('');
        }
    });
    $(this).blur(function() {
        var restoredValue = $(this).data("value").datavalue;
        if ($(this).val() == '') {
            $(this).val(restoredValue);
        }
    });
});


$('input[title]').each(function() {
    if ($(this).val() === '') {
        $(this).val($(this).attr('title'));
    }

    $(this).focus(function() {
        if ($(this).val() === $(this).attr('title')) {
            $(this).val('');
        }
    });

    $(this).blur(function() {
        if ($(this).val() === '') {
            $(this).val($(this).attr('title'));
        }
    });
});