ウェブアプリで数字しか入力できないコンポーネントと言えば、input type=number ですが、英数も見かけ上入力できてしまったり(Safari)、桁数を制限しようとmaxlengthやmaxを指定しても完全に効くわけではありません(Chrome/Safari)。 正規表現で入力できる文字を制限できる仕様 pattern もありますが、どうも機能していない様子。

無いものは創ろう。input-numberタグを作りました。

input-number tag demo
上2つが今回作ったinput-numberタグによる入力ボックスです。0-9の数値以外入りません。2番目はmaxlengthで長さを5に制限したもの。入れようとしてもはねられます。ペーストしていれようとしても対策済み! 拡張タグは必ず閉じタグが必要なので、忘れずに!その下は比較用の標準コンポーネントです。

つくりかた
文字を正規化するインターフェース的なValidatorクラスを作り、数値に特化したNumberValidatorクラスを作って、テストします。

Validatorのインスタンスを取る入力コンポーネント、InputWithValidatorクラスHTMLElementを派生して作って、最後に更にそれを派生したInputNumberクラス作って、できあがり!

import { NumberValidator } from "./NumberValidator.js"; import { InputWithValidator } from "./InputWithValidator.js"; class InputNumber extends InputWithValidator { constructor() { super(new NumberValidator()); } } customElements.define("input-number", InputNumber); シンプルですね!

高専で習っただけでは分かりづらい「オブジェクト指向」。実用コードを読んで、触って、体得するのが一番です。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS