JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="div_form">
    <div class="div_pole" contenteditable="true" data-text="text" data-text1="1">логин...</div>
    <div class="div_pole" contenteditable="true" data-text="text" data-text2="1">пароль...</div>
    <div class="div_btn" data-btn="1">кнопка</div>
</div>
<div class="div_form">
    <div class="div_pole" contenteditable="true" data-text="text" data-text1="2">логин...</div>
    <div class="div_pole" contenteditable="true" data-text="text" data-text2="2">пароль...</div>
    <div class="div_pole" contenteditable="true" data-text="text" data-text3="2">повторите пароль...</div>
    <div class="div_btn" data-btn="2">кнопка</div>
</div>

CSS

.div_form {
    background: #E7E7E7;
    border: 1px solid #cccccc;
    font: 300 14px/20px kelson_sans_rulight, Arial, Helvetica, sans-serif;
    margin: 10px auto;
    padding: 10px;
    width: 400px;
}
.div_pole {
    background: #FAFAFA;
    border: 1px solid #ADADAD;
    margin-bottom: 10px;
    padding: 4px 8px;
}
.div_btn {
    background: #00A02C;
    border: 1px solid #007420;
    color: #ffffff;
    cursor: pointer;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
}

JavaScript

$(document).ready(function () {
    var txt1 = "",
        txt2 = "";
    $('.div_pole').focusin(function () {
        txt1 = $(this).html();
        $(this).html('');
    });
    $('.div_pole').focusout(function () {
        txt2 = $(this).html();
        if (txt2 == "") {
            $(this).html(txt1);
        }
    });
});

$(document).on('click', '[data-btn]', function () {

    var id = $(this).data('btn'),
        text1 = $('[data-text1="' + id + '"]').html(),
        text2 = $('[data-text2="' + id + '"]').html(),
        text3 = $('[data-text3="' + id + '"]').html();

    if (id == 1) {
        alert(id + " - " + text1 + " - " + text2);
    } else {
        alert(id + " - " + text1 + " - " + text2 + " - " + text3);
    }
});