JavaScriptでinput要素の操作をする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでinput要素の操作をする方法について現役エンジニアが解説しています。input要素とは、フォームコントロールの一種です。inputにイベントを設定するには要素を取得して、イベントを設定します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでinput要素の操作をする方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでinput要素の操作をする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLのinput要素とは

input要素とは、ユーザが様々なデータを入力できるようにするためのフォームコントロールを示します。

type属性を設定することで振る舞いが大きく異なります。
テキストエリア、チェックボックス、セレクトフィールド、パスワードフィールドなどに変化する特殊な要素です。
 

JavaScriptでinput要素の操作をする方法

JavaScriptでinput要素を操作するためには、getElementByIdを用います。

input要素のHTMLにidを追加することでJavaScriptからinput要素を容易に取得できます。
 

<input type="text" id="text1">

 

上記のinput要素はid値を設定したテキストボックスです。

この要素の操作をしたいときは
 

document.getElementById("text1");

 

とすれば、input要素の値に対して様々な操作を行えます。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptで、input要素に関連するイベントハンドラを作成する方法

input要素にイベントハンドラを設定するためには、getElementByIdで取得した要素を使用します。

HTML

<input type="button" id="hoge" value="huga">

 

JavaScript

var btn = document.getElementById("hoge");

// btnにイベントハンドラを設定

btn.onclick = alert('hogehoge');

// getElementByIdで取得したinput要素のonclickにアラートを設定

 

input要素のタイプによって、設定できるイベントは異なります。

※上記例文はボタンに対して押したときの処理(onclick)を設定しています。
 

実際に書いてみよう

イベントハンドラは、input要素の属性タグにそのまま記述することもできます。

各イベントハンドラを属性タグに埋め込んでみましょう。

onclick(要素がクリックされたとき)
 

<input type="button" value="クリックされました" onclick="alert('クリック!')">

 
onkeypress(要素をフォーカスしているときに、何かのキーが押されたとき)
 

<input type="text" onkeypress="document.getElementById('t1').innerHTML += '[キープレス!]'">

<div id="t1">Event: </div>

 

onmouseover(マウスカーソルが対象要素の上に乗った時)
 

<input type="button" value="マウスを重ねて!" onmouseover="document.getElementById('t2').innerHTML +='[マウスオーバー!]'">

<div id="t2">Event: </div>

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。