jsを用いてリアルタイムで入力値を取得する

はじめに

　値が入力される度に、ページをリロードせず値を確認したい。そんな時に有効なのが...　oninput　！

　本記事において、oninputを簡単な実用例を挙げて説明します。

oninputについて

　時間、金額、数量などを、ページのリロードを行わずに和、積等を求めることができるイベントハンドラです。
　テキストボックスに値が入力されると同時に発火するため、コピーしてきた数値をペーストした際にも発火します！使い方としては非常に簡単な上、使える場面も多いので覚えておいて損のない機能です。

簡単な実用例

php側で入力欄と戻り値を表示する位置を用意し、入力された数値2つをそのまま表示、和を求める機能を作ります。

sample.php

//入力欄
<input type="number" id="sample1" value="">
<input type="number" id="sample2" value="">

//入力欄1の値表示位置
<h6 id="numOfSample1"></h6>
//入力欄2の値表示位置
<h6 id="numOfSample2"></h6>
//入力欄1,2の和表示位置
<h6 id="numOfSampleSum"></h6>

入力されたタイミングで発火->入力値の取得->和の算出->それぞれの値を表示
上記の順でJava scriptを組み立ててゆきます。

samplejs.js

window.onload = function(){
    var total = 0;
    //sample2に値が入ったときに発火
    document.getElementById("sample2").oninput = function(){
        //入力値の取得
        var num1 = document.getElementById("sample1").value;
        var num2 = document.getElementById("sample2").value;
        
        //和の算出
        total = parseInt(num1) + parseInt(num2);

        //入力値及び和の表示
        document.getElementById("numOfSample1").innerHTML = num1;
        document.getElementById("numOfSample2").innerHTML = num2;
        document.getElementById("numOfSampleSum").innerHTML = total;
    }
}

　入力欄1を入力後、入力欄2を入力する場合のみを想定しています。入力の順番を問わず出力させることも難しくないので、挑戦してみてください。

おわりに

　最後までお読みいただきありがとうございます。
今回のコードは入力値とその和を表示するだけの非常に単純な構造ですが、oninput基本の形になるので条件分岐等活用すれば様々な場面で使えるかと思います！今後も初心者の私が躓いた内容を中心に記事を書いていく予定なので、今後も何卒よろしくお願いいたします