JSFiddle - React, Tailwind, and code Playground

by Technobulka

HTML

<input type="text" class="name" />
<input type="text" class="phone" />
<input type="text" class="code" />

CSS

input.blur { color:#ccc; }

JavaScript

$.fn.inputDef = function(opt) {
    var def = {
            blurClass: 'blur',
            text: this.val()  
        },
        opts = $.extend(def, opt);    
      
    this
        .addClass(opts.blurClass)
        .val(opts.text)
        .focus(function() {
            if($(this).val() == opts.text) $(this).val('');
            $(this).removeClass(opts.blurClass);
        })
        .blur(function() {
            if($(this).val() == '') {
                $(this).val(opts.text);
                $(this).addClass(opts.blurClass);
            }
        })
};

$('input.name').inputDef({
    text: 'Ваше имя'
});
$('input.phone').inputDef({
    text: 'Номер телефона'
});
$('input.code').inputDef({
    text: 'Код'
});