ただのブログです

技術的な物とかを主に。主にWeb系がメイン。いつか、職業エンジニアになりたい。

貴様らには分かるまい!全角数字の恐ろしさが!

マルチバイトが浸透していない地域では分からないこのめんどくささ。
全角入力→半角数字入力的なフォームがあるとUX的に重要な入力補助。

こんな感じで持っておく。メソッド名が適切じゃないような気がするけど…

String.prototype.toHalfNumber = function() {
    return this.replace(/[0123456789]/g, function(a){
        var b = "0123456789".indexOf(a);
        return (b !== -1) ? b : a;
    }).replace(/\d+\.\d+/g, function(a) {
        return a.replace(".", ".");
    });
};

日本人なら持っておきたいところ←

で、これを

var _number = function(){
    var value = $(this).val();
    value = value.toHalfNumber().replace(".","");
    if(!$.isNumeric(value)) {
        $(this).val("");
        return;
    }
    $(this).val(value);
};

とか書いて

$("#foo").on("blur", _number);

として上げるといいんじゃないかと思った。
バリデーションメッセージ出してやるより強制補正かけて上げたほうが地味に使い勝手がよくなった気がする。

その他はここに書いてる

$("input[type=text]").inputSupport();

としてやればHTMLで

<input type="text" data-type="number">

と書いてやっておけば発動する感じ。その他data-type=floatとかdata-type=integerとかdata-type=dateとかも作ったけど。

しかしこれを書いてる途中にはまったテストの部分。

JsTestDriverで

var actual = "0.2".toNumberHalf();
assertString(actual);
assertEquals("0.2", actual);

がコケる。ブラウザ上で実行するとうまくいってる。

ナンデ!ナンデナノ!?

なんか多分マルチバイトなせいで内部的な文字コードでウヴォアってなってるんだろうけど対策方法未発見。