テキストエリアのjQuery設定値
JavaScript では、querySelector() メソッドを介して HTML element、id、または class のインスタンスをインスタンス化します。 ただし、このチュートリアルの例では、jQuery(#id) を使用します。
ここでも、HTML タグに適切な属性を追加するなど、テキスト領域に値を設定するための他の規則が存在します。したがって、DOM 操作に焦点を当てるのではなく、jQuery で問題を解決します。
今日のチュートリアルでは、.val() および .attr() メソッドを使用して JQuery のテキスト領域の値を設定する方法を学びます。
.val() vs .attr()
input または textarea の値を設定するために jQuery で使用される .val() メソッドは、string を示しています。 デフォルトでは、テキスト領域は空のままですが、行、単語、または定義済みの説明により、このスコープで何をすべきかが明確になります。
通常、ほとんどの input タグでは、デフォルトの文字列を設定する value 属性を見つけます。 しかし、textarea タグの場合、value 属性はありません。 代わりに、placeholder 属性があります。 次に、コード セグメントでこれらのソリューションを表すインスタンスを調べます。
.val() メソッドを使用して textarea の値を設定する
この例では、固定寸法のテキスト領域があります。 さらに、それに id を追加します。 タスクは簡単です。 指定された id を持つそのタグのインスタンスを取得し、.val() メソッドを適用します。
メソッド内で、文字列 (例: "This is text area") を渡すか、文字列を変数に格納してから渡すことができます。 しかし、まず、コード フェンスを視覚化しましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 1";
$("#txt").val(str);
</script>
</body>
</html>
出力：
ご覧のとおり、テキスト エリア ボックスでは、値が文字列として設定されています。 ひもが取り外し可能であることに気付くかもしれません。 この慣習は少し時代遅れであるか、または十分にクールではないようです。 それでは、次の例を見てみましょう。
.attr() メソッドを使用して textarea の値を設定する
.attr() メソッドは、特定の HTML 要素の属性値を設定します。 DOM 要素と一緒に属性を設定するのではなく、選択時に動的に処理できるため、jQuery または JavaScript を介して属性を設定する主な方法です。
ただし、ここではメソッドのパラメーターを設定し、textarea 要素には placeholder という名前の検証済み属性があります。 したがって、最初のパラメーター placeholder を指定し、2 番目の引数は値になります。 しかし、最初に、コード行を確認しましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 2";
$("#txt").attr("placeholder", str);
</script>
</body>
</html>
出力：
出力は、.attr() メソッドで渡された文字列がプレースホルダー値として設定されたことを示しています。 これは、textarea のビューを設定するため、より統合されたスマートなビューです。
