How to set the input box to non editable state (four methods)

Time:2021-12-1

Method 1:readonlyIt is specified that the input field is read-only and can be copied. However, the user can use the tab key to switch to this field, select, receive focus, and select or copy its text. (status: the input box will turn gray)

<input type="text" value="hello JavaScript" readonly="readonly">

Method 2:disabledThe disabled input element can be copied and cannot receive focus. After setting, the text color will turn gray. Cannot be used with. (status: the input box will turn gray)

<input type="text" value="hello JavaScript" disabled="disabled">

Method 3: by controlling the inputMax length is 0realization

<input type="text" maxlength="0">

Method 4:ο nf ο Cus = “this. Blur();” onfocuse “means focus, when you put the cursor on the text box for input, it is focused, but “this. Blur()” is added here. Blur is used to remove the focus, that is, you can’t put the cursor on the text box, in other words, you can’t input text (status: the input box doesn’t change color)

<input type="text" value="hello JavaScript" οnfοcus="this.blur();">