html5入力で入力を禁止する方法

html5 入力禁止の実装方法: 1. 入力フィールドを読み取り専用として指定し、readonly を通じてコピー可能にします; 2. 無効になった入力要素はコピーできるがフォーカスを受け取ることができないことを認識するには、disabled を使用します; 3. By入力の制御 最​​大長は 0 です; 4. "οnfοcus="this.blur();"" を使用して、テキストを入力できないことを認識します。

#本チュートリアルの動作環境：Windows 10 システム、HTML5 版、DELL G3 パソコン

html5 入力 入力禁止方法?

入力禁止(フォーカス取得禁止)の複数メソッドとhtmlでの入力制限数と長さ

入力禁止(フォーカス取得禁止)

1: readonly は、入力フィールドが読み取り専用でコピー可能であることを規定します。ただし、ユーザーは Tab キーを使用してフィールドに切り替え、フィールドを選択し、フォーカスを取得し、選択またはコピーできます。そのテキスト。

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

2: 無効 無効にされた入力要素はコピーできますが、フォーカスを受け取ることができません。設定後、テキストの色は灰色になります。 とは併用できません。

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

3: 入力の最大長を 0

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

4 に制御することで実現します: οnfοcus="this.blur();"onfocuse は、カーソルを上に置いたときにフォーカスすることを意味します。 text テキストボックスに入力するとフォーカスされますが、ここに「this.blur()」が追加されます。blur の機能はフォーカスを解除することです。つまり、このテキスト ボックスにカーソルを置くことはできません。つまり、

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

入力入力番号と長さの制限

1.type='number' 入力を数字に制限し、oninput で制限長を決定します (maxlength では入力できないことがわかります) type='number' を使用した後に使用します)

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

2. 長さを制限するには maxlength を使用し、入力ボックスを純粋な数値に制限するには oninput を使用します

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

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

onkeyup イベントを使用する場合にバグがあります。つまり、中国語入力メソッドの状態で、入力後に直接 Enter キーを押すと、漢字、文字

b および onchange = "value=value は直接入力されます。.replace(/[^\d]/g,'')"

onchange イベントを使用します内容を入力した後、結果は入力がフォーカスを失ったときにのみ取得されます。入力中は応答できません。

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

oninput イベントを使用すると、上記 2 つの問題は完全に解決されます。テスト 他の問題はまだ発生していません。

推奨学習: 「

HTML ビデオ チュートリアル 」

以上がhtml5入力で入力を禁止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。