<input type="number">
を使った場合、Chrome では数字以外入力できませんが、他のブラウザでは数字以外の文字も入力できてしまいます。(submit時にエラーになりますが)
数字のみが入力可能なテキストボックスを作ることは出来るでしょうか?
HTMLだけではおそらく不可能だと思います。JavaScriptを使えば可能ですが、実装方法はフレームワークによって違います。
React.jsの場合
https://stackoverflow.com/questions/43067719/how-to-allow-only-numbers-in-textbox-in-reactjs
jQueryの場合
https://jsfiddle.net/Behseini/ue8gj52t/
$(".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();
}
});
<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>