JSFiddle - React, Tailwind, and code Playground

by brunomsilva

HTML

<form>
      <div id="name">
    <input type="text" name="username" title="Username" size="10" />
                                        </div>
                      <div id="name">
               <input type="text" name="password" title="Password" size="10" />
                           </div>
<input type="submit" value="Login" id="button" style="width:55px; height:26px">
       </form>

CSS

#name { 
    border: 1px solid #000;
    height: 26px;
    width: 110px;
}
input[type=text].hint{ 
color: #000;
 filter: alpha(opacity=50);
 opacity: 0.5;
 font-size: 11px;
     border: transparent;
}
input[type=text]{
    font-size: 12px;
  color: #000;
     border: transparent;
}

JavaScript

$(document).ready(function() {
    //Shows the title in the text box, and removes it when modifying it
    $('input[title]').each(function(i) {
        if (!$(this).val()) {
            $(this).val($(this).attr('title')).addClass('hint');
        }


        $(this).focus(

        function() {
            if ($(this).val() == $(this).attr('title')) {
                $(this).val('').removeClass('hint')[0].type = 'password';
            }
        });

        $(this).blur(

        function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('title')).addClass('hint')[0].type = 'text';
            }
        });
    });

});