JavaScript でテキスト領域の値を取得する
Muhammad Muzammil Hussain
2023年10月12日
Web 開発では、ほとんどの場合、HTML DOM ドキュメントやその他のライブラリを使用して、テキスト エリアの値を読み取って取得する必要があります。 JavaScript と jQuery のデフォルト関数の両方を使用して対処できます。
この記事では、JavaScript と jQuery を使用して Web ページのテキスト領域の値を取得し、それを変数に格納する方法を学習します。
JavaScript でテキスト領域の値を取得する
JavaScript では、HTML DOM ドキュメント メソッド getElementById("elementId").value を使用してテキスト値を読み取ることができます。 メソッド getElementById() は、定義された値を持つ要素を返します。 要素が存在しない場合は、null を返します。
プロパティ .value は、テキスト領域の属性 value の値を配置して返します。 そのプロパティには、デフォルト値またはユーザーが指定した値が含まれます。
基本的な構文:
ここでは、ID を使用して特定の要素の値を取得し、それを textValue 変数に格納します。
let textValue = document.getElementById('myText').value
コード例:
<!DOCTYPE html>
<html>
<body>
<h1>
Get text area value in JavaScript
</h1>
Enter any value: <input type="text" id="myElement" value="Default">
<p>Click the button to read the value.</p>
<button onclick="myFunction()">Read Value</button>
<script>
function myFunction() {
let result = document.getElementById("myElement").value //getting value, storing in variable
alert(result) // displaying in alert
}
</script>
</body>
</html>
コード例の説明:
- 上記の HTML ソースでは、ユーザーから値を取得するための入力フィールドを作成しました。
- 次に、
myFunction()というボタンのボタンonclickイベントを作成しました。 myFunction()の本体で、result変数を宣言し、document.getElementById("myElement").valueを使用してその変数に要素値を割り当てました。- 最後に、
result変数の値をアラートでユーザーに表示しました。 - 上記のソースを拡張子
.htmlで保存し、任意のブラウザーで開いて結果を確認できます。
jQuery でテキスト領域の値を取得する
jQuery では、jQuery メソッド $("#elementID").val() を使用してテキスト値を読み取ることができます。 まず、ヘッダーのスクリプト タグに jQuery CDN (コンテンツ配信ネットワーク) を追加する必要があります。
コード例:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert( $("input:text").val()); //read value from input and display in alert
});
});
</script>
</head>
<body>
Enter any value: <input type="text" id="myElement" value="Default"> //getting value from user
<button >Read Value using jQuery</button>
</body>
</html>
コード例の説明:
- 上記の HTML コードでは、ユーザーから値を取得するための入力フィールドを作成しました。
- jQuery 関数を呼び出すためのボタンを作成しました。
<script>タグで、ボタンのクリック イベントを呼び出しました。- そのクリック イベント内で、ユーザーが指定したテキスト領域の値を読み取り、アラートに表示しました。
- 上記のソースを拡張子
.htmlで保存し、任意のブラウザーで開いて結果を確認できます。