logo サブスレッド

夏になってinputタグに整数のみの制限をつけるにおよんで

いつも筋肉を裏切っています。 古谷です。

iOS10でUIWebViewにスタティックなhtmlを表示し、その中のinputタグに対して整数以外を入力させない要件がありました。
もともとAndroidアプリを作っていたので、
* input自体の制限機能を使う(type=“number”) * 入力イベントを取って、テキストを直接変更する(inputイベント) のどちらかだろうと考えました。

結果から言うと、type=“number”は効きませんでした。
そもそも対応していなかったようです。

色々検索して、
inputイベントで、自身のテキストを書き変える
方法を試しました。
これも失敗しました。UIWebViewでは入力したテキストが増殖してしまいました。
例として、「1,2,3」と順に入力した場合ですが、
「1」
「112」
「112123」
と増えていくのです。
どうしてこうなった・・・

そこでみんなの助けを借りて、keypressイベントで制御することにしました。
やはりサンプルコードをいくらか見ようと検索していたのですが、数個見たところでなにやら違和感が。
その記事を読み終えて、再度ページの一番上にスクロールして驚きました。
その記事のURLは

https://www.subthread.co.jp/blog/20161031/

だったのです。

大いなる存在の書き置きを見ると、keypressのサンプルコードが書かれていないとのことだったので、私が書き加えることにしました。

少々手を加えたコードではありますが、

    $("#hoge").keypress(function (e) {
        // 数字しか入力させない
        if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(e.originalEvent.keyCode) < 0) {
            event.preventDefault();
        }
    });

です。
数字以外のキーコードはpreventDefault()で何もしないように設定しました。
これで目的は達成されたのでよかったよかった。

今期もお世話になりました。
来期もよろしくお願い致します。

現在の位置:サブスレッド ホーム > 技術ブログ > 夏になってinputタグに整数のみの制限をつけるにおよんで