Help us understand the problem. What is going on with this article?

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基本の形になるので条件分岐等活用すれば様々な場面で使えるかと思います!今後も初心者の私が躓いた内容を中心に記事を書いていく予定なので、今後も何卒よろしくお願いいたします:grin:

patapataxppp
20年4月よりプログラマー職に就職。 研修内容のアウトプット兼ねて、休日に個人でPHP,Java Scriptでの簡素なアプリケーションの開発を行っております。初心者が躓いた内容を、初心者向けの記事にして発信中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away