Create Readonly HTML Input Area, but Select

Question

I have an input area that is transparent, and when you click on it, a luminous border (intended) appears, and you can edit the text. I am trying to get a luminous border to still display when you click it, but make the text unedited.

<input style='border:none; background:none;' value='TEXT'>  

Adding readonlyor readonly="readonly"forcing the input to act as an uneditable div, you cannot double-click on the input area to select everything, and the luminous frame is not displayed. How to keep input functionality while preventing text changes?

Answer 1

readonly CSS:

input:focus {
    box-shadow: 0 0 2px 2px #3d94db;
}

<input style='border:none; background:none;' value='TEXT' readonly> 

Hide result

Answer 2

,

, , - . preventDefault().

, , . contextmenu. .

var inputField = document.getElementById("input-field");

inputField.addEventListener("keydown", function(event) {
    event.preventDefault();
});

inputField.addEventListener("contextmenu", function(event) {
    event.preventDefault();
});

<input type="text" id="input-field" value="This value can be selected" />

Hide result