JSFiddle - React, Tailwind, and code Playground

by nate

HTML

Value: <input id="value" />

<input id="foo" type="text" />

CSS

#value {
    border: 0;
}
#foo {
    border: 5px solid red;
    display: block;
    margin: 1em;
    padding: 10px;
}

JavaScript

var input = document.getElementById('foo');
var valueDisplay = document.getElementById('value');

var value;

input.addEventListener('keydown', function (event) {
    if (event.keyCode === 13) {
        value = this.value;
        valueDisplay.value = value;
        this.parentElement.removeChild(this);
    }
});

input.addEventListener('blur', function (event) {
    console.log('BLUR');
    value = this.value;
    valueDisplay.value = value;
    this.parentElement.removeChild(this);
});