JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  <input type="text" readonly value="foo">
</p>
<p>
  <input type="text" readonly value="bar">
</p>

CSS

input[type="text"] {
  font-family: arial;
}
input[type="text"][readonly] {
  background: transparent;
  border-color: transparent;
}

JavaScript

document.body.addEventListener('dblclick', function(e) {
	var target = e.target;
  if (target.matches('input[type="text"][readonly]')) {
    target.readOnly = false;
    target.focus();
  }
});

document.body.addEventListener('blur', function(e) {
	var target = e.target;
  if (target.matches('input[type="text"]:not([readonly])')) {
    target.readOnly = true;
  }
}, true); // focusout wouldn't need this, but it's not supported by Firefox

document.body.addEventListener('keydown', function(e) {
	var target = e.target;
  if (target.matches('input[type="text"]:not([readonly])') && e.keyCode === 13) {
    target.readOnly = true;
  }
});