How to prohibit input in html5 input

html5 Input prohibition implementation method: 1. Specify the input field as read-only and copyable through readonly; 2. Use disabled to realize that the disabled input element can be copied, but cannot receive focus; 3. By controlling the input The max length is 0; 4. Use "οnfοcus="this.blur();"" to realize that text cannot be input.

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

html5 input How to prohibit input?

Input prohibition of input (forbidden to obtain focus) multiple methods and input limit number and length in html

Input prohibition of input (forbidden to obtain focus)

1: readonly stipulates that the input field is read-only and copyable. However, the user can use the Tab key to switch to the field, select it, receive focus, and select or copy its text.

<input type="text" value="禁止输入，可以使用Tab键切换到该字段" readonly="readonly">

2: disabled The disabled input element can be copied and cannot receive focus. After setting, the color of the text will turn gray. Cannot be used with .

<input type="text" value="可复制，不能接收焦点，字的颜色会变成灰" disabled="disabled">

3: Achieved by controlling the max length of the input to 0

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

4: οnfοcus="this.blur();"onfocuse means focus, when you put the cursor on the text When typing in the box, it is focused, but "this.blur()" is added here. The function of blur is to remove the focus, that is, you cannot place the cursor on this text box. In other words, you cannot enter text.

<input type="text" value="去除聚焦，不能输入文本" onfocus="this.blur();">

Input input number and length limit

1.type='number' limits the input to numbers, and oninput determines the limit length (it is found that maxlength cannot be used after using type='number' )

<input class="inputs" type="number" value="只输入数字，长度11位" oninput="if(value.length>11)value=value.slice(0,11)"  />

2. Use maxlength to limit the length, and oninput to limit the input box to pure numbers

<input type="text" placeholder="请输入您的手机号" oninput = "value=value.replace(/[^\d]/g,&#39;&#39;)" maxlength="11">

a, onkeyup = "value=value.replace(/[^\d]/g,' ')"

There is a bug when using the onkeyup event. That is, in the Chinese input method state, if you press Enter directly after inputting Chinese characters, the letters

b and onchange = "value=value will be entered directly. .replace(/[^\d]/g,'')"

Use the onchange event. After inputting content, the result will only be obtained when the input loses focus. It cannot respond during input.

c, oninput = "value=value.replace(/[^\d]/g,'')"

Using the oninput event perfectly solves the above two problems. Test No other problems have occurred yet.

Recommended study: "HTML Video Tutorial"

The above is the detailed content of How to prohibit input in html5 input. For more information, please follow other related articles on the PHP Chinese website!