HTML でフォーム入力やその他のテキスト ボックスを読み取り専用にして編集不可にする方法

HTML でフォーム入力やその他のテキスト ボックスを読み取り専用にして編集不可にする方法
場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその中の情報を変更できないようにする必要があります。たとえば、<input type="text" name="input1" value="中国"> のコンテンツでは、「中国」という単語を変更できません。要約すると、それを実装する方法はいくつかあります。

方法1: onfocus=this.blur()はマウスを置くことができないときにフォーカスを失います
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2: 読み取り専用
<input type="text" name="input1" value="中国" 読み取り専用>
<input type="text" name="input1" value="中国" readonly="true">

方法3: 無効
<input type="text" name="input1" value="中国" disabled="true">

完全な例:

<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />

disabled="true"このオプションを有効にすると、テキストは灰色になり、編集できなくなります。
readOnly="true" のテキストは色が変わらず、編集できません

CSS シールド入力: <input style="ime-mode: disabled">

方法は 2 つあります。1 つ目は disabled="disabled" です。この定義の後、無効な入力要素は使用できず、クリックもできなくなります。 2 番目: readonly="readonly" 読み取り専用フィールドは変更できません。ただし、ユーザーは引き続き Tab キーを使用してフィールドに切り替え、そのテキストを選択またはコピーできます。

<<:  TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

>>:  デザイン理論: デザインにおける階層

推薦する

XHTML言語のデフォルトCSSスタイル

html、アドレス、引用ブロック、本文、dd、div、 dl、dt、フィールドセット、フォーム、フレ...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

Linux 上の Tomcat で MySQL にデータを挿入するときに中国語の文字化けが発生する問題を解決する

1. 問題Windows 上の Eclipse を使用して開発されたプロジェクトは Windows ...

テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル

ウェブサイトの開発とメンテナンスのコストが削減されるだけでなく、コードもよりセマンティックになります...

MySQL でデータ テーブルを作成し、主キーと外部キーの関係を確立する方法の詳細な説明

序文MySQL テーブルの主キーと外部キーを作成するときは、次の点に注意する必要があります。主キーと...

img 画像タグに alt 属性を付与する必要がありますか?

img 画像タグに alt 属性を追加しますか?画像 img タグの alt 属性を見落とすことはよ...

複雑なSQLクエリを含むMySQLの一般的なSQL文の概要

1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...

JavaScript でプロパティハイジャックを実装する方法 defineProperty

目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...

実践で遭遇するフロントエンドの基本(HTML、CSS)

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...

Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例

概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...

WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...

MySQL 8.0.24 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.24バージョンのインストールと設定方法を記録し、皆さんと共有しますM...

Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...

Vueで親子コンポーネント通信を実装する方法

目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...

MySql8 WITH RECURSIVE 再帰クエリ親子コレクションメソッド

背景コメントに似た機能を開発する場合は、必要に応じてすべてのコメントのサブセットをクエリする必要があ...