jquery入力は決して編集できません

この記事では、jQueryを使ってフォームの入力ボックスを編集不可にする方法を紹介します。

多くのアプリケーションでは、通常、テキスト入力を受け取るために使用される基本的な HTML 要素の 1 つである input 要素を使用します。場合によっては、ユーザーが入力ボックスで編集できないように、一部の入力ボックスを読み取り専用モードに設定したいことがあります。これは、テキスト コンテンツがデータベースまたは API によって生成されているか、悪用を防ぐために設定されていることが考えられます。

一般に、入力ボックスを読み取り専用状態に設定するには、バックエンドで操作して HTML 属性 (読み取り専用など) の出力を制御する必要があります。ただし、バックエンド コードにアクセスできない場合や、HTML 属性を簡単に変更できない場合は、jQuery を使用することでこの状況に対処できます。

ここでは、jQuery を使用して入力ボックスを読み取り専用状態に設定する方法を示すいくつかの例を示します。

例 1: .prop メソッドの使用

.prop( ) jQuery のメソッドは、プロパティ値を取得または設定するために使用されます。 .prop() メソッドを使用して、入力ボックスを読み取り専用モードに設定できます。次のコードは、.prop() メソッドを使用してこれを実現する方法を示しています。

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').prop('readonly', true);
});

この方法では、入力ボックスは読み取り専用モードに設定され、ユーザーはテキストを編集できなくなります。初期化。入力ボックスの値を変更する必要がある場合は、jQuery の .val() メソッドを使用するだけです。

例 2: .attr メソッドの使用

上記の例は、.prop() メソッドを使用して入力ボックスを読み取り専用モードに設定する方法を示しています。ただし、場合によっては、prop() メソッドが正しく動作しないことがあります。たとえば、jQuery の一部のバージョンでは、prop はドキュメントが読み込まれた後に存在する要素のみを制御でき、AJAX または他のメソッドを通じて追加された後続の要素には効果がない場合があります。この時点で、.prop() メソッドの代わりに .attr() メソッドを使用できます。以下は、.attr() メソッドを使用したサンプル コードです。

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

このコードは、入力ボックスを読み取り専用モードに設定します。入力ボックスを再度編集できるように、removeAttre() メソッドを使用して読み取り専用属性を削除できます。

例 3: CSS を使用する場合

上記 2 つの例は、要素の属性値を直接変更する方法であり、実装方法は単純ですが、HTML の純度を損なう可能性があります。要素の属性値を変更せずに入力ボックスを編集不可にしたい場合は、CSS スタイルを使用して制御できます。具体的には、入力要素の CSS スタイルを設定して、ユーザーによる編集を禁止できます。以下は、CSS を使用したサンプル コードです。

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- CSS -->
input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

このコードは、すべての読み取り専用属性入力ボックスにスタイルを追加し、背景を灰色にして禁止記号を表示し、ユーザーが編集できないようにします。このメソッドは JavaScript に依存せず、HTML 属性値を変更しません。入力ボックスを編集可能にリセットする必要がある場合は、input[readonly] と CSS 内の対応するルールを削除するだけで済みます。

共有の概要

アプリケーションでは、入力ボックスを読み取り専用モードに設定する必要がある場合があります。 jQuery を使用すると、これを簡単に実現して、ユーザーの間違いを防ぐことができます。 .prop() メソッドと .attr() メソッドを使用して要素の属性値を変更したり、CSS スタイルを使用して入力ボックスを編集不可として制御したりできます。さらに、input 要素の disabled 属性を true に設定する、さまざまな jQuery プラグインを使用するなど、他の方法を使用して同じ目的を達成することもできます。この記事で示した例は jQuery の実装方法の 1 つにすぎず、読者は実際のアプリケーションのニーズに応じて選択できます。

以上がjquery入力は決して編集できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。