iPhoneの数値入力を改善するjQueryプラグイン

iPhoneのテンキーは、下の画像のように同じ数字を連続してタイプすると”11”→”☆”、“55”→”+“のように記号が入力される仕様になっています。ボタンをいたずらに増やすよりは理にかなっていると思うのですが、type=“number”としたinputタグにおいても記号に変換されるのはさすがにおかしいですよね。

記号が入力されてしまう様子

そこで、記号が入力された場合には強引に数値を復元するようなjQueryプラグインを作成しました。

使い方は以下のように記述するだけです。

<head>
  <script type="text/javascript" src="jquery.min.js"></script>
  <!-- プラグインの読み込み -->
  <script type="text/javascript" src="jquery.iphone.inputnumber.js"></script>
  <script type="text/javascript">
    $('input[type=number]').iphoneinputnumber();
  </script>
</head>
<body>
  <!-- type="number"なinputを配置 -->
  <input type="number" />
</body>

iPhone以外を利用しているときは無効化するなどすべきかもしれませんが、とりあえず今後の課題としておきます。やっておきました。