数字入力フォームに文字数制限をつける
投稿日:
HTML5で追加された<input type="number" />
ですが、maxlengthの指定ができません。
なので、Javascriptで最大桁数の制御を入れてみます。
HTML
3桁の例
<input type="number" name="bangou3keta" oninput="sliceMaxLength(this, 3)">
5桁の例
<input type="number" name="bangou5keta" oninput="sliceMaxLength(this, 5)">
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;
}