最近Vue.jsを使い始めたので、試しに郵便番号を受け取って住所を返すプログラムを作ってみました。
その際にinput要素を入力に使ったんですが、郵便番号って桁数が変わらないので長さを3-4に固定しようとした時のこと……

「type=”number”のときmaxlength動かなくね?」

という忘備録です。

HTML5仕様書では

「type属性にnumberを指定したらこれらの属性は併用できませんよ」ということが書かれています。

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple,pattern, size, src, and width.

(W3Cの策定した仕様書https://www.w3.org/TR/html5/forms.html#number-state-(type=number)より引用)

動かないのは仕様なんですね!

1.タグ内部に直接javascript文を書いて制御する

文字数的に改行してます。
このように書くとjsが動的にmaxlengthをうごかしてくれるようですね!
因みにjsのmaxLengthはhtmlのmaxlengthに対応しています。

2.jQueryでscript側から制御する

jQueryを使ってます。中身は1の方法と全く同じですね。これで実行すると一見ちゃんと制御できてるように見えるんですが、中ではひどいことが起きてますw

左が1の方法、右が2の方法なんですが、このやり方だとどうやら値をbindingしてからinputの中身の値だけsliceしているようです。(コードには載せてないですが、Vue.jsでbindingしてます)
値を読み取る場合は使わないほうがいいかもしれないです(対処法があったら教えて欲しいです)

3.script使わない方法

js使わない方法です。
type=”text”ならmaxlengthはちゃんと機能してくれるので、textを数値のみに限定して入力されるようにしてあげます。

\d*は整数n文字という意味です(\d{4}なら整数4文字)。
patternだけでも一応制限はできるみたいですね。

補足ですが、patternだけで文字数を制御した時とmaxlengthを使った時とでは挙動が違います。
前者の場合\d{4}にしても入力自体は何文字でもできてしまいます。「合致しません」みたいなのが出るだけです。
後者の場合は入力できる文字数自体を制限できるので、maxlengthに定めた数以上は打てません。

では!