数字入力フォームに文字数制限をつける

投稿日:2018-05-18

HTML5で追加された<input type="number" />ですが、maxlengthの指定ができません。
なので、Javascriptで最大桁数の制御を入れてみます。

HTML

3桁の例  
&lt;input type="number" name="bangou3keta" oninput="sliceMaxLength(this, 3)"&gt;  
5桁の例  
&lt;input type="number" name="bangou5keta" oninput="sliceMaxLength(this, 5)"&gt;  

Javascript

function sliceMaxLength(elem, maxLength) {  
    elem.value = elem.value.slice(0, maxLength);  
}  

また、<input type="number" />にすると右端に数字を増減するスピンボタンが表示されます。
電話番号の入力欄などでは不要なので、以下のCSSで非表示にしてしまいます。

CSS

// Chrome、Safari  
input[type="number"]::-webkit-outer-spin-button,  
input[type="number"]::-webkit-inner-spin-button {  
  -webkit-appearance: none;  
  margin: 0;  
}  

// Firefox、IE  
input[type="number"] {  
  -moz-appearance:textfield;  
}  

関連する記事