JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<form action="" method="post" class="b-form user-type-person form-registration" data-form-type="person" autocomplete="off" autocorrect="off" autocapitalize="off">
    <div class="form-row-wrapper row-user-type-wrapper row-wrapper-multiple">
        <div class="form-row row-user-type row-radio button button-white check-state" data-row-type="person" data-check-scope="user-type">
            <div class="row-label">
                <label for="user-type-person" class="row-label-self">Частное лицо</label>
            </div>
            <div class="row-controls">
                <div class="row-control control-type">
                    <input type="radio" value="0" data-auto-submit="1" name="type" id="user-type-person" checked="checked" class="control-self control-self-radio " />
                </div>
            </div>
        </div>
        <div class="form-row row-user-type row-radio button button-white" data-row-type="company" data-check-scope="user-type">
            <div class="row-label">
                <label for="user-type-company" class="row-label-self">Компания</label>
            </div>
            <div class="row-controls">
                <div class="row-control control-type">
                    <input type="radio" value="1" data-auto-submit="1" name="type" id="user-type-company" class="control-self control-self-radio " />
                </div>
            </div>
        </div>
    </div>
    <div class="form-row row-register row-text">
        <div class="row-controls">
            <div class="row-control control-name">
                <input type="text" value="" maxlength="40" name="name" id="name" placeholder=" Ваше имя" class="control-self control-self-text " />
            </div>
        </div>
    </div>
    <div class="form-row row-seller-manager row-text">
        <div class="row-controls">
            <div class="row-control control-manager">
                <input type="text" value="" maxlength="40" name="manager" disabled="disabled"...

JavaScript

$('[placeholder]').each(function () {
    var node = this;
    if (node.type === 'password') {
        node.type = 'text';
    }
    node.value = node.getAttribute('placeholder');
    node.onfocus = function () {
        var passNode = this,
            placeholder = passNode.getAttribute('placeholder');

        if (passNode.value === placeholder) {
            passNode.value = '';
        }
    };
    node.onblur = function () {
        var passNode = this,
            placeholder = passNode.getAttribute('placeholder');
        
        if (passNode.value === '' || passNode.value === placeholder) {
            passNode.value = placeholder;
        }
    };
});