THE HAM MEDIA BLOG

input要素に入力した数字を足すJSを簡単に実装してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
計算

仕事で、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. エラーの場合は計算しない

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

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

■コードとデモ その2

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);
  });
});
+ =

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

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

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

■コードとデモ その3

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内で毎回キーが押される度に2つのinput内の値判定をしてしまうのはどうかと思ったのですが、とりあえず。

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

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

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

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

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

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

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

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

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

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

この記事へのコメント
Any time you happen to be searching the web for a great remedy, ’ http://canadianpharmacyv.com/ generic cialis recommended if you're over 70 years old?, Shop around for cheap prices on canadian pharmacy review http://canadapharmacyonlinev.com/ are unbelievably low they are probably counterfeit., Can I expect more discounts if I buy online canadian pharmacy http://bestcanadianpharmacyv.com/ for details., Is taking canadian online pharmacy http://canadaonlinepharmacyv.com/ . More info’s awaits you., tay ignorant. best canadian online pharmacy http://canadianpharmacyonlinev.com/ at a discount, is there something wrong with the product? !
Posted by ZhbkubaSM at 2017年02月16日

Much thanks! It is definitely an superb site. ’
Posted by BdbfuyCK at 2017年02月27日

Merely want to tell you I'm thankful that i came on your internet page! ’
Posted by Vnbusk at 2017年02月27日
ED gone with our newest product at ’ http://canadianpharmacyonline77.com/ cialis online . More info’s awaits you., Has your canada pharmacy online http://precriptiondrugscanada24.com/ if you order through this site, you need an effective treatment option, you should definitely canada drugs review http://canadapharmacyonlinev.com/ for privacy., You can easily go online to check the canadian online pharmacy http://canadaonlinepharmacyv.com/ . It’s good for ED too!, People look for the cheapest price of canada drugs review http://onlinecial4ferc.com/ contains all the details. !
Posted by GqikeozCA at 2017年03月01日
<a href="http://usa4cialedc.com/">tadalafil cialis</a>

Howdy very nice web site!! Man .. Beautiful .. Wonderful .. I will bookmark your web site and take the feeds additionally? I am glad to seek out a lot of useful information right here in the put up, we want work out more techniques on this regard, thanks for sharing. . . . . . ’ http://usa4cialedc.com/
Posted by SwlufmLS at 2017年03月21日
<a href="http://generic4menjlc.com/">cialis pill</a>

With thanks! It a terrific website. ’ http://generic4menjlc.com/
Posted by ZrhvqrUL at 2017年03月22日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/185563807
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。