textareaの設定値jquery

王林
王林オリジナル
2023-05-14 12:15:372688ブラウズ

textarea 要素を使用する場合、初期値を設定したり、その値を動的に変更したりする必要がある場合があります。これは、jQuery 操作を使用して簡単に実現できます。この記事では、jQuery を使用してテキストエリアの値を設定する方法を説明します。

メソッド 1: val() メソッド

val() メソッドは、form 要素 (textarea 要素を含む) の値を取得または設定できます。その構文は次のとおりです。

$(selector).val(value)

このうち、selector は選択したい要素のセレクターを表し、value は設定する値です。 value 引数が省略された場合、このメソッドは指定された要素の現在の値を返します。

次の例は、ID myTextarea を持つ textarea 要素の初期値を設定します。

<textarea id="myTextarea"></textarea>
$(document).ready(function(){
  $('#myTextarea').val('初始的文本内容');
});

上記のコードを実行すると、テキスト ボックス内のテキスト コンテンツが設定されます。ページが開かれます。 が「最初のテキストコンテンツ」です。

同じ方法を使用して、textarea のコンテンツを動的に変更することもできます。たとえば、ユーザーがボタンをクリックすると、テキストエリアのコンテンツを「新しいテキスト コンテンツ」に変更できます。

<textarea id="myTextarea"></textarea>
$(document).ready(function(){
  $('#myTextarea').val('初始的文本内容');
  $('#modifyBtn').click(function(){
    $('#myTextarea').val('新的文本内容');
  });
});

上記のコードを実行した後、ページ上の「コンテンツの変更」ボタンをクリックすると、テキストエリアのコンテンツが「新規テキストコンテンツ」に変更されます。

方法 2: text() メソッド

textarea 値を設定する別の方法は、text() メソッドを使用することです。このメソッドは要素のテキスト コンテンツを設定しますが、HTML タグは無視します。したがって、テキストエリアのコンテンツに HTML タグが含まれている場合、これらのタグはテキストとして扱われます。 text() メソッドの構文は次のとおりです。

$(selector).text(content)

このうち、selector は選択したい要素のセレクターを表し、content は設定するテキストの内容を表します。 content パラメータが省略された場合、このメソッドは指定された要素の現在のテキスト コンテンツを返します。

次は、ID myTextarea の textarea 要素の初期値を設定する例です。

<textarea id="myTextarea"></textarea>
$(document).ready(function(){
  $('#myTextarea').text('初始的文本内容');
});

上記のコードを実行すると、textarea のコンテンツは、ページが開きます。テキストコンテンツ」。

text() メソッドを使用して、textarea のコンテンツを動的に変更することもできます。たとえば、ユーザーがボタンをクリックすると、テキストエリアのコンテンツを「新しいテキスト コンテンツ」に変更できます。

<textarea id="myTextarea"></textarea>
$(document).ready(function(){
  $('#myTextarea').text('初始的文本内容');
  $('#modifyBtn').click(function(){
    $('#myTextarea').text('新的文本内容');
  });
});

上記のコードを実行した後、ページ上の「コンテンツの変更」ボタンをクリックすると、テキストエリアのコンテンツが「新規テキストコンテンツ」に変更されます。

概要

上記は、jQuery で textarea の値を設定する 2 つのメソッドです。 val() メソッドはほとんどの場合に適していますが、text() メソッドは HTML タグを無視する必要がある場合に適しています。 textarea の初期値を設定したり、その内容を動的に変更する必要がある場合は、状況に応じて適切な方法を選択してください。

以上がtextareaの設定値jqueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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