フォームを処理し、入力などのテキスト ボックスを読み取り専用および編集不可にする方法

方法 1: onfocus=this.blur()

<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法 2: readonly

<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true">

方法 3: 無効

<input type="text" name="input1" value="中国" disabled>

Readonly と Disabled は両方とも、ユーザーがフォーム フィールドのコンテンツを変更できないようにすることができます。ただし、それらの間にはわずかな違いがあり、それらを要約すると次のようになります:
Readonly は入力 (テキスト/パスワード) と textarea に対してのみ有効ですが、disabled はすべてのフォーム要素に対して有効です。 POST または GET で送信された場合、この要素の値は渡されませんが、readonly は値を渡します (readonly は値の変更を受け入れてそれを返すことができ、disable は変更を受け入れますがデータを返しません)。
最も一般的に使用される状況は次のとおりです。
フォームにはユーザーの一意の識別コードが事前に入力されており、ユーザーはそれを変更できません。ただし、この時点では、その属性を送信する必要があります。読み取り専用に設定する必要があります。
ユーザーがフォームを正式に送信し、管理者による情報の検証を待つ必要がある場合、ユーザーはフォーム内のデータを変更することはできず、表示のみが可能であることがよくあります。要素では、この時点では無効にして使用する必要がありますが、同時に、データベース操作ページで整合性チェックがない場合、ユーザーがこのボタンを押している間は送信ボタンも無効にする必要があることに注意してください。 、データベース内の値がクリアされます。この場合、無効ではなく readonly を使用しても、フォーム内に input (text/password) 要素と textarea 要素しかない場合は、select などの他の要素がある場合でも、ユーザーは値を書き換えて押すことができます。 Enter キーを押して送信します (Enter はデフォルトの送信トリガー ボタンです)
ユーザーが送信ボタンを押した後、JavaScript を使用して送信ボタンを無効にすることがよくあります。これにより、ネットワーク状態が悪い環境でユーザーが送信ボタンを繰り返しクリックすることを防ぐことができます。これにより、データがデータベースに重複して保存されます。
disabled と readonly にはいくつかの共通点があります。たとえば、両方が true に設定されている場合、js コードを記述するときにこれら 2 つの属性を混合するのは簡単です。違い:
入力項目の無効が true に設定されている場合、フォーム入力項目はフォーカスを取得できず、入力項目に対するユーザーのすべての操作 (マウスのクリックやキーボード入力など) が無効になります。フォームを送信するときに、このフォーム入力は送信されないということです。
Readonly は、テキストを入力できるテキスト入力ボックスなどの入力項目のみに使用されます。 true に設定すると、ユーザーは対応するテキストを編集できなくなりますが、フォーカスすることはでき、フォームを送信するときに入力項目が使用されます。フォームAの提出。

いくつかのパフォーマンスの問題:
display:noneとvisibility:hiddenの違いは、visibility:hiddenが要素のスペースを保持することです
repaint(再描画)、再描画が変更されると、要素の外観が変更されます。アウトライン、可視性、背景色の変更など、レイアウト条件下で発生する変更がない場合は、DOM 構造のレンダリングには影響しません。
リフロー (レンダリング) 、再ペイントとの違いは、DOM 構造のレンダリングに影響を与えると同時に、再ペイントをトリガーし、それ自体とすべての親要素 (祖先) を変更することです。このオーバーヘッドは非常に高くなります。必然的に、ページ上の要素が増えるほど、その影響はより顕著になります。
つまり、display:none はリフローを生成しません
visibility:hidden は再描画のみをトリガーします

関連記事:

js 入力テキストボックスを読み取り専用に設定します

js を通じてすべてのフォームオブジェクトを読み取り専用に設定します

jsを使用して入力ボックスの読み取り専用属性を動的に制御します

以上がフォームを処理し、入力などのテキスト ボックスを読み取り専用および編集不可にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。