フォーム入力欄に半角数字以外を入力できないようにしたい

前提・実現したいこと

分単位で入力したら、◯◯時間◯◯分に変換したテキストを入力欄の側にテキストとして表示させる入力フォームを作成しています。入力欄には半角数字以外入力できないようにしたい。

発生している問題・エラーメッセージ

JSでイベント（keydown keyup blur）が発火した時に、全角数字を半角に変換していますが、safariで、全角文字入力→enterを押した時に同じ文字が入力されるなど、挙動がおかしくなる。

該当のソースコード



    SAMPLE.ConvertInputTime.prototype = {
      IS_ERROR: 'err',
      init: function() {
        this.$parents = this.$trigger.closest('td');
        this.$output = this.$parents.find('.jscConvertTimeOutput');

        this.bindEvent();
      },
      bindEvent: function() {
        var self = this;
        this.$trigger.on('keyup keydown blur', function() {
          self.convert($(this));
        });
      },
     convert: function($trigger) {
        var maxlength = this.$trigger.attr('maxlength');
        var inputValue = $trigger.val();
        inputValue = inputValue.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function($trigger){
          return String.fromCharCode($trigger.charCodeAt(0) - 65248)
        }).slice(0, maxlength);
        this.$trigger.val(inputValue);

        var alertText = this.getAlertText(inputValue);
        this.changeBgColor(inputValue);
        this.$output.text(alertText);
      },
      getAlertText: function(inputValue) {
        var time = Math.floor(inputValue / 60);
        var minutes = inputValue % 60;

        if(inputValue <= 0 || inputValue % 5 !== 0 || inputValue === '') {
          return '5分単位で入力してください';
        }else if(time === 0 && minutes < 60) {
          return minutes + '分';
        }else if(minutes === 0) {
          return time + '時間';
        }else {
          return time + '時間' + minutes + '分';
        }
      },
      changeBgColor: function(inputValue){
        if(inputValue % 5 !== 0) {
          this.$parents.addClass(this.IS_ERROR);
          return;
        }
        this.$parents.removeClass(this.IS_ERROR);
      },
    };

試したこと

イベントをkeydown keyupではなくinputにするとchromeで同じように挙動がおかしくなった。
また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。

入力制限を最新のPCブラウザ（IE11、edge、firefox、chrome、safari）に対応させることは可能でしょうか？

行動規範の内容に同意します

回答3件

ベストアンサー

inputにするとchromeで同じように挙動がおかしくなった

ちょっと状況がわかりませんが、モダンブラウザなら入力必須や制限が指定できます

HTML
1<form>
2<input type="text" name="x" required pattern="^[0-9]+$">
3<input type="submit" value="go">
4</form>

投稿2017/07/03 04:12

yambejp

総合スコア117669

yambejp

2017/07/03 04:14

ただしsubmit時の制限になるので、入力時のチェックをしたいならやはりinputイベントでチェックするのが妥当です

wtn

2017/07/03 12:21

返答ありがとうございます。やはりjavascriptで入力時にチェックするのではなく、submitの時にやるのが良さそうですね。不具合についてですが、inputに変更したところ、safariで全角数字入力時に不具合が起きました。・不具合確認用　（safariで不具合） https://jsfiddle.net/n_wtn/o90nyubo/10/

行動規範の内容に同意します

input[type=range]

UIが変わりますが、input[type=range] なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。

input[type=range] - JSFiddle

HTML
1<input id="minutes" type="range" min="0" max="1000" step="5">
2<div id="output"></div>
3
4<script>
5jQuery('#minutes').on('change', function (event) {
6  var minutes = event.target.valueAsNumber;
7
8  jQuery('#output').text(minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分');
9});
10</script>

input[type=number]

(2017/07/04 13:16追記)
このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
後述の input[type=text] のコードを使用して下さい。

input[type=number] - JSFiddle

HTML
1<input id="minutes" type="number" min="0" max="1000" step="5">
2<div id="output"></div>
3
4<script>
5'use strict';
6jQuery('#minutes').on('input change', function (event) {
7  var input = event.target, message;
8
9  if (input.checkValidity()) {
10    var minutes = input.value.length ? input.valueAsNumber : 0;
11    message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
12  } else {
13    message = input.validationMessage;
14  }
15
16  jQuery('#output').text(message);
17});
18</script>

input[type=text]

HTML
1<style>
2input:invalid {
3  border: solid 3px #f88;
4}
5</style>
6</head>
7<body>
8
9<input id="minutes" type="text" pattern="0*[0-9]{0,2}[05]$" maxlength="3" value="0" data-custom-error-message="0-995 の間の5の倍数を指定して下さい">
10<div id="output"></div>
11
12<script>
13'use strict';
14(function () {
15  function toASCIINumber (numberString) {
16    return numberString.replace(/[０-９]/g, function (numberChar) {
17      var multiByte = '０１２３４５６７８９', singleByte = '0123456789';
18
19      return singleByte[multiByte.indexOf(numberChar)];
20    });
21  }
22
23  function handleInput (event) {
24    var input = event.target, minutes = toASCIINumber(input.value), message;
25
26    if (input.value !== minutes) {
27      input.value = minutes;
28    }
29
30    minutes = Number(minutes);
31    input.setCustomValidity('');  // Reset input.validity.customError to false.
32
33    if (input.checkValidity()) {
34      message =  minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分';
35    } else {
36      message = input.validationMessage;
37    }
38
39    jQuery('#output').text(message);
40  }
41
42  function handleInvalid (event) {
43    var input = event.target;
44
45    input.setCustomValidity(input.getAttribute('data-custom-error-message'));
46  }
47
48  jQuery('#minutes').on('input', handleInput).on('invalid', handleInvalid).trigger('input');
49}());
50</script>

Safari で <input type="number" /> を使用できない

また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。

念のため、確認しますが、iOS Safari ではなく、Mac Safari でしょうか。
Google Chrome 59.0.3071.115 で input[type=number] において、全角数字の入力を受け付けない現象は確認できました。
Can I use によれば、iOS Safari 9.3-11 はインクリメント/デクリメントボタンが存在せず、min, max, step 属性を実装していません。

Number input type - Can I use...

更新履歴

2017/07/04 01:47 input[type=number] のコード追記
2017/07/04 13:16 input[type=text] のコード追記

Re: wtn さん

投稿2017/07/03 14:00

編集2017/07/04 04:17

think49

総合スコア18194

wtn

2017/07/13 11:45 編集

返信が遅れ申し訳ありません。返答ありがとうございます。 >ーボード入力は必須でしょうか。キーボード入力は必須です。 >iOS Safari ではなく、Mac Safari でしょうか。 safari はMac Safariです。なのでブラウザはIE11、edge、firefox、chrome、MAC safariの最新版に対応していることが条件になります。

行動規範の内容に同意します

keydown keyupなど入力発生時に都度チェックして変換していると入力操作自体に支障をきたしかねません。
「半角数値のみ入力可」とヘルプ文言を添えておき、入力内容送信時のバリデーションチェックに集約しておいた方が良いと思いますよ。

投稿2017/07/03 04:09

編集2017/07/03 04:09