JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

JavaScript

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<!--
    <style>
        #input1:focus {
outline: 5px solid red;
}
    </style>
	-->
</head>
<body>
    <div style="margin:5px;">
        <p>Double-click to make writable (<strong>cursor lost</strong> but you still can type)</p>
        <input id="input1" type="text" readonly="readonly" onmousedown="mouseDown()" onmouseup="mouseUp()"/>
    </div>

    <div style="margin:5px;">
        <p>Double-click to make writable (expected behavior)</p>
        <input id="input2" type="text" readonly="readonly" onmousedown="mouseDown()" onmouseup="mouseUp()"/>
    </div>

    <script>
    var input1 = document.getElementById('input1');
    input1.addEventListener('dblclick', onDblClick);
    input1.addEventListener('blur', onBlur);
    input1.addEventListener('focus', onFocus);
	
    var input2 = document.getElementById('input2');
    input2.addEventListener('dblclick', onDblClick);
    input2.addEventListener('blur', onBlur);
    input2.addEventListener('focus', onFocus);
	
    function onDblClick(e) {
        this.readOnly = false;
		console.log("DblClick" + window.getSelection().focusNode);
    }

	function onFocus(e) {
	    e.target.style.outline = "5px solid red";
		console.log("Focus" + window.getSelection().focusNode);
    }
	
    function onBlur(e) {
        this.readOnly = true;
		console.log("blur" + window.getSelection().focusNode);
    }
	
	function mouseDown() {
		console.log("mousedown" + window.getSelection().focusNode);
}

function mouseUp() {
		console.log("mouseup" + window.getSelection().focusNode);
}
    </script>

</body>
</html>