ユーザーがjqueryの入力ボックスにコンテンツを入力できないようにする方法

Web開発では、入力ボックスへのユーザーの入力内容を制限する必要がある場合があり、その際、入力ボックスを操作するためにいくつかのjQueryメソッドを使用する必要があります。この記事では主に、jQuery を使用してユーザーが入力ボックスにコンテンツを入力できないようにする方法を紹介します。

1. 入力ボックス禁止のデフォルト機能

jQueryで入力ボックスへの入力を禁止する前に、まずinputタグのtype属性を理解する必要があります。 input タグには主に次のものが含まれます。

1. text：テキスト ボックス
2. password：パスワード ボックス
3. radio：ラジオ ボックス
4. checkbox：チェックbox
5. submit: 送信ボタン
6. reset: リセット ボタン
7. file: ファイルのアップロード
8. hidden: 隠しフィールド
9. date: 日付picker
10. number: 番号入力ボックス
11. email: メール入力ボックス
12. tel: 電話番号入力ボックス
13. search: 検索入力ボックス

次は、jQuery を使用して入力ボックスのデフォルト機能を無効にするコードです:

$(document).ready(function() {
  // 禁止文本框和密码框的默认功能
  $('input[type="text"],input[type="password"]').bind('keypress', function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
    }
  });
});

上記のコードでは、まず jQuery の .ready() メソッドを使用して、ページがロードし、.keypress イベントをバインドします。入力ボックスのデフォルトのキャリッジ リターン送信機能を防止します。このうち、event.keyCodeは押されたキーボードのキーコードを表し、13はEnterキーのkeyCodeを表します。

2. 入力ボックスへの入力を無効にする

場合によっては、ユーザーが入力ボックスにテキストを入力することを禁止する必要があります。以下は、jQuery を使用して入力ボックスへの入力を禁止するコードです。 :

$(document).ready(function() {
  // 禁止文本框和密码框输入
  $('input[type="text"],input[type="password"]').bind('input propertychange', function(event) {
    this.value = this.value.replace(/[^\u0000-\u00ff]/g, ''); // 只允许输入英文、数字和中文等ASCII字符
  });
});

上記のコードでは、.input イベントと .propertychange イベントをバインドすることで、入力ボックス内のコンテンツの変更をリッスンします。イベント処理関数では、String オブジェクトの replace() メソッドを呼び出し、正規表現 /¹/g を使用して非 ASCII 文字を除外し、禁止する効果を実現しました。入力です。

3. 入力ボックスを無効にする

すべての入力ボックスを無効にする必要がある場合があります。以下は、jQuery を使用して入力ボックスを無効にするコードです。上記のコードでは、jQuery を使用してすべての入力タグを選択し、.attr() メソッドを通じてそれらに「disabled」属性を設定します。これにより、すべての入力ボックスが無効になります。

4. 単一の入力ボックスを無効にする

場合によっては、単一の入力ボックスを無効にするだけで十分な場合があります。以下は、jQuery を使用して単一の入力ボックスを無効にするコードです:

$(document).ready(function() {
  // 禁用所有输入框
  $('input').attr('disabled', 'disabled');
});

上記のコードでは、セレクター "#" ID を通じて指定された入力ボックスを取得し、.attr() メソッドを通じてそれらに "disabled" 属性を設定して、指定された入力ボックスを無効にします。

概要:

この記事では主に、入力ボックスのデフォルト機能の無効化、入力ボックスの入力の無効化、すべての入力ボックスの無効化、入力ボックスの無効化など、jQuery を使用して入力ボックスの入力を無効にするいくつかの方法を紹介します。単一の入力ボックス。実際のWeb開発業務に役立てていただければ幸いです。

以上がユーザーがjqueryの入力ボックスにコンテンツを入力できないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。