THE HAM MEDIA BLOG

仕事で、JSで計算ってできない？という質問が出てきたので、簡単に「できます！」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。

とりあえずは単純に作ってみた。

単純に入力した値を足してみる

まずはinput要素に入力した文字を単純に「+」で足してみようと思います。

■コードとデモ

jQuery(function($){
  $('button','.demo1').click(function(){
    //左側inputの入力値を取得（numA）
    var numA = $('input:eq(0)','.demo1').val();
    //右側inputの入力値を取得（numB）
    var numB = $('input:eq(1)','.demo1').val();
    //左＋右の値を出力
    $('input:eq(2)','.demo1').val(numA+numB);
  });
});

単純にinput要素に入力された値を「+」で足してみているのですが、数値が文字列として認識されてしまい、文字として結合をしてしまいます。通常の文字列も通ってしまいます。

ということで、もう少し仕組みを加えなければいけません。

仕組みとして必要なこと

1. 入力した値を数値として足し算
2. 入力されていない、もしくは、数値以外の入力はエラー表示
3. エラーの場合は計算しない

とりあえずは上記のようにしてみようと思います。

入力した値を数値として足す

■コードとデモ その２

jQuery(function($){
  $('button','.demo2').click(function(){
    var numA = $('input:eq(0)','.demo2').val();
    //parseIntで文字列を数値に
    numA = parseInt(numA);
    //数値が入っていない場合アラート
    if(!numA){
      alert('左側の入力が空白もしくは数値以外です');
      return false;
    };
    var numB = $('input:eq(1)','.demo2').val();
    //parseIntで文字列を数値に
    //数値が入っていない場合アラート
    numB = parseInt(numB);
    if(!numB){
      alert('右側の入力が空白もしくは数値以外です');
      return false;
    };
    //計算結果を出力
    $('input:eq(2)','.demo2').val(numA+numB);
  });
});

これで数値の足し算ができました。

入力した時点で計算をする

ここまでは計算結果というボタンを押したときに計算がされるというものでしたが、数値を入力した時点で計算できるようにしてみようと思います。

■コードとデモ その３

jQuery(function($){
  $('input','.demo3').keyup(function(){
    var numA = $('input:eq(0)','.demo3').val();
    var numB = $('input:eq(1)','.demo3').val();
    //parseIntで文字列を数値に
    numA = parseInt(numA);
    numB = parseInt(numB);
    //左側の入力値が数値では無い場合の処理
    if(!numA){
      //計算結果表示のinput内を削除
      $('input:eq(2)','.demo3').val('');
      return false;
    };
    //右側の入力値が数値では無い場合の処理
    if(!numB){
      //計算結果表示のinput内を削除
      $('input:eq(2)','.demo3').val('');
      return false;
    };
    $('input:eq(2)','.demo3').val(numA+numB);
  });
});

これはエラー表示は特に無し。何かkeyが押された時点で判定をして、左右共に数値であれば計算結果が出力されます。

input内で毎回キーが押される度に２つのinput内の値判定をしてしまうのはどうかと思ったのですが、とりあえず。

もっと使い勝手を良くするためには？

最低限必要かなと思った仕組みはとりあえず実装してみました。しかし、予め数値以外の入力はできないようにしておいたりなどもしておくともっと使いやすさは上がるでしょう。そして数値以外の入力ができないというアラート、もしくはツールチップ表示などなどのお知らせもでるのも利用者のためになるのではないでしょうか。

とりあえず今回はものすごく簡単にここまで。

余談：HTML5でのinput type="number"で数値以外が入力できてしまう？

今回の計算式は数値のみを計算するものだったため、HTML5のinput要素でtype="number"を使おうと思ったのですが、まだブラウザによって挙動が違ってました。てっきり数値のみの入力はできなくなるのかと思っていたら、Chromeの最新版ではたしかに数値以外の入力は受け付けてくれなかったのですが、他ブラウザでは数値以外も入力できてしまう状況。

「ん？どっちが正しいのだろう？」とかまで疑問に思ったのですが、『HTML5.JP』をみてみたところ、

ユーザーエージェントは、ユーザーが妥当な浮動小数点数でない文字列をその値にセットできるようにしてはいけません。ユーザーエージェントが数値を選択するためのインタフェースをユーザーに提供するなら、その値は、ユーザーの選択を表す浮動小数点数の最適表現なるようセットされなければいけません。

input 要素 - HTML5 タグリファレンス - HTML5.JP

本来であれば浮動小数点数でない文字列は入力できない状態が正しいとのこと。なるほど。まだまだこれらはしっかり実装されていないのか。

これがHTML側だけで制御できるようになれば楽なんですけどね。いつになることやら。