JavaScriptでテキスト入力フィールドの値を取得：valueプロパティ、oninputイベント、addEventListenerメソッド
2024-04-02
JavaScript でテキスト入力フィールドの値を取得する方法
value プロパティを使用する
これは最も簡単で基本的な方法です。テキスト入力フィールドの value プロパティには、ユーザーが入力した値が格納されています。以下のコードのように、getElementById メソッドを使ってフィールドを取得し、value プロパティにアクセスすることで、値を取得できます。
<input type="text" id="my-input" />
const inputElement = document.getElementById("my-input");
const value = inputElement.value;
console.log(value); // ユーザーが入力した値が出力されます
oninput イベントは、ユーザーがテキスト入力フィールドに入力するたびに発生します。このイベントリスナーを設定することで、ユーザーが入力するたびに値を取得することができます。
<input type="text" id="my-input" />
const inputElement = document.getElementById("my-input");
inputElement.oninput = function() {
const value = inputElement.value;
console.log(value); // ユーザーが入力するたびに値が出力されます
};
addEventListener メソッドを使って、input イベントリスナーを設定することもできます。
<input type="text" id="my-input" />
const inputElement = document.getElementById("my-input");
inputElement.addEventListener("input", function() {
const value = inputElement.value;
console.log(value); // ユーザーが入力するたびに値が出力されます
});
上記の方法のどれを使用しても、テキスト入力フィールドの値を取得することができます。それぞれの方法の特徴を理解して、状況に合わせて使い分けてください。
補足
- 上記のコードは、基本的な例です。実際の使用例では、エラー処理やバリデーションなどの処理を追加する必要があります。
valueプロパティは、文字列型で値を取得します。数値型などに変換する場合は、parseIntやparseFloatなどの関数を使用する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキスト入力フィールドの値を取得</title>
</head>
<body>
<h1>テキスト入力フィールドの値を取得</h1>
<p>
<label for="input-value">名前:</label>
<input type="text" id="input-value" name="name" />
</p>
<button onclick="getValueByValue()">値を取得</button>
<p id="value-output"></p>
<p>
<label for="input-oninput">年齢:</label>
<input type="text" id="input-oninput" name="age" />
</p>
<p id="oninput-output"></p>
<p>
<label for="input-add-event-listener">メールアドレス:</label>
<input type="text" id="input-add-event-listener" name="email" />
</p>
<p id="add-event-listener-output"></p>
<script>
// 1. value プロパティを使用する
function getValueByValue() {
const inputElement = document.getElementById("input-value");
const value = inputElement.value;
document.getElementById("value-output").textContent = value;
}
// 2. oninput イベントを使用する
const inputOnInputElement = document.getElementById("input-oninput");
inputOnInputElement.oninput = function() {
const value = inputOnInputElement.value;
document.getElementById("oninput-output").textContent = value;
};
// 3. addEventListener メソッドを使用する
const inputAddEventListenerElement = document.getElementById("input-add-event-listener");
inputAddEventListenerElement.addEventListener("input", function() {
const value = inputAddEventListenerElement.value;
document.getElementById("add-event-listener-output").textContent = value;
});
</script>
</body>
</html>
上記コードを保存し、ブラウザで開くと、テキスト入力フィールドに入力した値がそれぞれの下にある出力欄に表示されます。
各方法の詳細
value プロパティを使用する
getElementByIdメソッドを使って、テキスト入力フィールドを取得します。valueプロパティを使って、フィールドの値を取得します。
oninput イベントを使用する
oninputイベントリスナーを設定します。
テキスト入力フィールドの値を取得するその他の方法
<input type="text" id="my-input" />
const inputElement = document.querySelector("#my-input");
const value = inputElement.value;
console.log(value); // ユーザーが入力した値が出力されます
document.forms プロパティを使って、フォームを取得することができます。フォームを取得したら、elements プロパティを使って、テキスト入力フィールドを取得することができます。
<form>
<input type="text" name="name" />
<input type="text" name="age" />
</form>
const formElement = document.forms[0];
const inputElement = formElement.elements["name"];
const value = inputElement.value;
console.log(value); // ユーザーが入力した名前が出力されます
jQuery ライブラリを使用すると、簡単にテキスト入力フィールドの値を取得することができます。
<input type="text" id="my-input" />
// jQuery ライブラリの読み込み
$(document).ready(function() {
const value = $("#my-input").val();
console.log(value); // ユーザーが入力した値が出力されます
});
javascript dom html-input
