frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

数字のmaxlengthが効かない?oninputでの対処法

スポンサードリンク


スポンサードリンク


テキストボックスの文字数制限の仕方は下記の通り。

<input type="text" maxlength="5">

数字のみに制限したい場合は以下のようにします。

<input type="number" pattern="[0-9]*" maxlength="5">

しかしtype="number"はmaxlengthがききません。
入力を数字と文字数制限両方適応させたい場合の対処法を紹介します。

oninput

oninputはjavascriptの input イベントのためのイベントハンドラです。input イベントは、 要素の値が変化したときに発生します。
参考:GlobalEventHandlers.oninput - Web API インターフェイス | MDN

しかしJSファイルにこれだけの記述を書くのも手間ですよね。
一行で済むのでinput要素内に書いてしまうのも手です。

codepen.io

これで数字と文字数制限両方適応させることができました。
oninput便利ですね。