JSFiddle - React, Tailwind, and code Playground

by pioul

HTML

<label>Facebook
    <input type="text" placeholder=""/>
    <button>use content</button>
</label>

<label>Twitter
    <input type="text" placeholder=""/>
    <button>use content</button>
</label>

<label>LinkedIn
    <input type="text" placeholder=""/>
    <button>use content</button>
</label>

CSS

label {
    display: block;
    position: relative;
    margin-bottom: 20px;
}

input {
    display: block;
    width: 100%;
}

button {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
}

input:not([placeholder=""]) + button {
    display: block;
}

input:focus + button,
input.has-content + button {
    display: none;
}

JavaScript

'use strict';

var inputs = document.querySelectorAll('input');

document.body.addEventListener('input', function(e) {
	if (e.target.nodeName != 'INPUT') return;
    
    updateInputHasContent(e.target);
    if (areOtherInputsEmpty()) updatePlaceholders(e.target.value);
});

document.body.addEventListener('click', function(e) {
	if (e.target.nodeName != 'BUTTON') return;
    
    var input = e.target.closest('label').querySelector('input');
    input.value = input.placeholder;
    updateInputHasContent(input);
    input.focus();
});

function areOtherInputsEmpty() {
    var nonEmptyInputs = 0;
    
    for (let i in inputs) {
        if (inputs.hasOwnProperty(i) && inputs[i].value != '') nonEmptyInputs++;
    }
    
    return nonEmptyInputs <= 1;
}

function updatePlaceholders(val) {
    for (let i in inputs) {
        if (inputs.hasOwnProperty(i)) inputs[i].placeholder = val;
    }
}

function updateInputHasContent(input) {
    input.classList.toggle('has-content', input.value != '');
}