47227

[code]

    <input type="number">
    
[/code]

を使った場合、Chrome では数字以外入力できませんが、他のブラウザでは数字以外の文字も入力できてしまいます。（submit時にエラーになりますが）

数字のみが入力可能なテキストボックスを作ることは出来るでしょうか？


CC BY-SA 4.0
2018-08-03T14:11:00.497
47225
2019-12-13T17:53:55.227
3925
question
javascript html css html5
数字以外入力できないテキストボックスを作りたい


HTMLだけではおそらく不可能だと思います。JavaScriptを使えば可能ですが、実装方法はフレームワークによって違います。

React.jsの場合  
<https://stackoverflow.com/questions/43067719/how-to-allow-only-numbers-in-
textbox-in-reactjs>

jQueryの場合  
<https://jsfiddle.net/Behseini/ue8gj52t/>

[code]

    $(".allownumericwithdecimal").on("keypress keyup blur", function(event) {
      //this.value = this.value.replace(/[^0-9\.]/g,'');
      $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
      if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
      }
    });
    
    $(".allownumericwithoutdecimal").on("keypress keyup blur", function(event) {
      $(this).val($(this).val().replace(/[^\d].+/, ""));
      if ((event.which < 48 || event.which > 57)) {
        event.preventDefault();
      }
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <span>Float</span>
    <input type="text" name="numeric" class='allownumericwithdecimal'>
    <div>Numeric values only allowed (With Decimal Point) </div>
    <br/> <br/> <br/>
    
    <span>Int</span>
    <input type="text" name="numeric" class='allownumericwithoutdecimal'>
    <div>Numeric values only allowed (Without Decimal Point) </div>
[/code]


CC BY-SA 4.0
2018-08-03T15:31:47.473
47227
2019-12-13T17:53:55.227
2019-12-13T17:53:55.227
32986
29585
47225
answer