テキストボックスの値をJavaScriptを使って取得・設定する

フォームで利用可能なテキストボックスに入力された値を JavaScript から取得したり設定したりする方法について解説します。テキストボックスは 1 行の入力エリアを提供するもので、名前や年齢などの入力を行う場合に使用されます。テキストボックスを表示するには input 要素で type 属性に text を指定します。

(Last modified: )

HTMLでテキストボックスを作成する

HTML でテキストボックスを表示するには input 要素で type 属性に text を指定します。 

<input type="text">

幅を指定するには size 属性、 初期値を指定するには value 属性に値を設定します。 

<input type="text" size="40" value="名前を入力">

テキストボックスの前にラベルを表示する場合は label 要素と組み合わせます。 

<label>名前：<input type="text" size="40" value="名前を入力"></label>

テキストボックスの値の取得と設定

テキストボックスの値を取得するには input 要素を表す HTMLInputElement オブジェクトの value プロパティの値を参照します。書式は次のとおりです。 

element.value

例えば id 属性の値が mytext のテキストボックスに入力されている値を取得するには次のように記述します。 

let element = document.getElementById('mytext');
console.log(element.value);

また value プロパティに値を代入するとテキストボックスに値を設定することができます。 

let element = document.getElementById('mytext');
element.value = 'Hello';
サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>サンプルページです。</p>

<p>
<label>名前：<input type="text" id="nameText"></label>
<input type="button" value="Check" id="checkButton">
</p>

<p id="msg"></p>

<script>
function butotnClick(){
  msg.innerText = 'お名前は' + nameText.value + 'さんですね';
}

let nameText = document.getElementById('nameText');
nameText.value = '名前';
let msg = document.getElementById('msg');

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

テキストボックスの初期値を value プロパティに値を代入して設定しています。テキストボックスに名前を入力しボタンをクリックするとテキストボックスの値を value プロパティを使って取得し画面に表示します。

テキストボックスの値の取得と設定(1)

テキストボックスの値の取得と設定(2)

テキストボックスのイベント処理

テキストボックスではテキストの入力が終わったあとで Enter キーや Tab キーを押してフォーカスが別へ移ると change イベントが発生します。またテキストボックスで文字が入力されるたびに input イベントが発生します。

change イベントを利用する場合は次のように記述します。 

<label>名前：<input type="text" id="nameText"></label>

<script>
function inputChange(){
    // イベントが発生した時の処理
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('change', inputChange);
</script>

change イベントの詳しい使い方については「changeイベント：フォームや選択メニューが変更されたとき」を参照されてください。

input イベントを利用する場合は次のように記述します。 

<label>名前：<input type="text" id="nameText"></label>

<script>
function inputChange(){
    // イベントが発生した時の処理
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('input', inputChange);
</script>

input イベントの詳しい使い方については「inputイベント：フォームで文字が入力されたとき」を参照されてください。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<p>サンプルページです。</p>

<p>
<label>名前：<input type="text" id="nameText"></label>
</p>

<p id="msg"></p>

<script>
function inputChange(event){
  msg.innerText = 'お名前は' + nameText.value + 'さんですね';
}

let nameText = document.getElementById('nameText');
nameText.addEventListener('change', inputChange);
let msg = document.getElementById('msg');
</script>

</body>
</html>

テキストボックスに名前を入力し Enter キーを押すとテキストボックスの値を取得して画面に表示します。

テキストボックスのイベント処理(1)

今回は change イベントを使用しましたので、名前の入力が終わったときだけイベントが発生します。

-- --

フォームで利用可能なテキストボックスに入力された値を JavaScript から取得したり設定したりする方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。