ホームページ ウェブフロントエンド htmlチュートリアル HTML_HTML/Xhtml_Webページ制作でフォーム入力などのテキストボックスを読み取り専用にして編集不可にする方法

HTML_HTML/Xhtml_Webページ制作でフォーム入力などのテキストボックスを読み取り専用にして編集不可にする方法

May 16, 2016 pm 04:41 PM
input 読み取り専用

場合によっては、フォーム内のテキスト ボックスを読み取り専用にして、ユーザーがその情報を変更できないようにすることがあります。たとえば、 のコンテンツでは、「中国」という単語を変更できません。実装方法をまとめると以下のようになります。

方法 1: onfocus=this.blur() マウスを置けないときにフォーカスを残す


方法 2: readonly



方法 3: 無効


完全な例:



disabled="true " テキストは灰色になり、編集できません。
readOnly="true" テキストの色は変更されず、編集できません

CSS シールド入力:

あり最初のメソッド:disabled="disabled" は、無効化された入力要素が使用可能でもクリック可能でもないように定義されています。 2 番目: readonly="readonly" 読み取り専用フィールドは変更できません。ただし、ユーザーはタブ キーを使用してフィールドに切り替え、そのテキストを選択またはコピーすることができます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Linux の fstab ファイルを変更して読み取り専用属性を解除する方法 Linux の fstab ファイルを変更して読み取り専用属性を解除する方法 Jan 15, 2024 pm 05:57 PM

/dev/sdc1/varext3defaults,noexec12[root@localhost~]#mount-oremount を追加した後、セットビットプログラムとバイナリプログラムの実行を禁止するマウントオプションを試した後 [root@localhost~]#vi/etc/fstab/# /var システムの再起動後、/dev/sdc1 に入ることができず、文字インターフェイスにのみ入ることができることがわかります。その行を削除したいのですが、ファイルを保存するときに、読み取り専用属性 Read-onlyfilesystem が表示されます。(1) chmod+w/etc/fstab (2):w! を使用してみました。ファイルはまだ読み込まれています。のみであり、変更できません。

実践ガイド: Oracle でのテーブルレベルの読み取り専用権限の実装 実践ガイド: Oracle でのテーブルレベルの読み取り専用権限の実装 Mar 06, 2024 pm 05:09 PM

Oracle でのテーブル レベルの読み取り専用権限の実装は、データベース管理における一般的かつ重要な操作です。読み取り専用権限を設定すると、一部のユーザーがテーブル データのクエリのみを実行でき、テーブル データを変更できないようにすることができるため、データの整合性とセキュリティを効果的に保護できます。ここでは、Oracle でテーブルレベルの読み取り専用権限を実装する方法と、具体的なコード例を詳しく紹介します。ステップ 1: テーブルを作成する まず、Oracle でサンプル テーブルを作成し、テーブル レベルの読み取り専用権限を設定する方法を示します。 「exampl」というファイルを作成するとします。

vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 May 12, 2023 pm 03:58 PM

準備 vuecreateexample を使用してプロジェクトを作成します パラメーターは大まかに以下のとおりです ネイティブ入力を使用します ネイティブ入力は主に値と変更です 変更する場合はデータを同期する必要がありますApp.tsx は次のとおりです: import{ref}from'vue';exportdefault{setup(){//username はデータです constusername=ref('Zhang San');//入力ボックスが変更されると、データを同期します constonInput =;return( )=>({

Laravelの入力隠しフィールドを実装する方法 Laravelの入力隠しフィールドを実装する方法 Dec 12, 2022 am 10:07 AM

laravel入力の隠しフィールドを実装する方法: 1. Bladeテンプレートファイルを見つけて開きます; 2. Bladeテンプレートのmethod_fieldメソッドを使用して隠しフィールドを作成します。作成構文は「{{ method_field('DELETE') }}」です。 」。

パーティション ツール diskgenius を使用してディスクを読み取り専用に設定する方法 - diskgenius を使用してディスクを読み取り専用に設定する方法 パーティション ツール diskgenius を使用してディスクを読み取り専用に設定する方法 - diskgenius を使用してディスクを読み取り専用に設定する方法 Mar 04, 2024 pm 03:00 PM

皆さん、パーティション ツール diskgenius を使ってディスクを読み取り専用に設定する方法をご存知ですか? 今日は、パーティション ツール diskgenius を使ってディスクを読み取り専用に設定する方法を説明します。編集者です。お役に立てれば幸いです。ステップ 1: まず、DiskGenius ソフトウェアを開き、設定する必要があるディスクを選択します。ステップ 2: 次に、DiskGenius ソフトウェアでディスク メニューを開きます。ステップ 3: 再度、図に示すように、このディスクのステータスを「読み取り専用」に変更します。ステップ 4: 最後に、この操作を確認してディスクを読み取り専用にします。

入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 Nov 24, 2023 am 09:44 AM

カーソルなしで入力ボックスをクリックする場合の解決策: 1. 入力ボックスのフォーカスを確認する; 2. ブラウザのキャッシュをクリアする; 3. ブラウザを更新する; 4. JavaScript を使用する; 5. ハードウェア デバイスを確認する; 6. 入力を確認するボックスのプロパティ; 7. JavaScript コードをデバッグする; 8. ページの他の要素を確認する; 9. ブラウザーの互換性を考慮する。

Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Jun 21, 2023 am 08:12 AM

Vue.js は、使いやすく、効率的で柔軟な軽量の JavaScript フレームワークで、現在最も人気のあるフロントエンド フレームワークの 1 つです。 Vue.js では、入力ボックス バインディング イベントは非常に一般的な要件です。この記事では、Vue ドキュメントの入力ボックス バインディング イベントについて詳しく紹介します。 1. 基本概念 Vue.js では、入力ボックス バインディング イベントとは、入力ボックスの値を Vue インスタンスのデータ オブジェクトにバインドすることを指し、これにより入力と応答の双方向のバインドが実現されます。 Vue.j で

Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Vue ドキュメントで入力ボックスのキャリッジ リターン イベントと検証機能を使用する方法 Jun 20, 2023 am 09:13 AM

Vue は、応答性の高いデータ バインディングとコンポーネント システムを中核とする人気のある JavaScript フロントエンド フレームワークです。 Vue アプリケーションでは、入力ボックスは最も一般的に使用される UI 要素の 1 つです。ユーザーがテキストを入力するとき、復帰イベントをリッスンし、送信する前に入力を検証したいと考えています。この記事では、Vue ドキュメントでの入力ボックスの Enter イベントと検証関数の使用法を紹介します。 1. Vue の入力ボックスのキャリッジ リターン イベント Vue で入力ボックスのキャリッジ リターン イベントを監視するのは非常に簡単です。

See all articles