web-dev-qa-db-ja.com

HTML5の数値フィールドに末尾のゼロを表示するにはどうすればよいですか？

私はフィールドを持っています：

<input type='number' />

0.50を0.5に「修正」せずにパンチインしたいので、0.50が表示されます。

htmlinputnumbersdecimalfield
25
Akshat

私はこれを少し遊んで、スペックを見ました。有効な浮動小数点数でなければならないと書かれています。 有効な浮動小数点数の定義 に1つの文があり、これが私の注意を引きました：

浮動小数点数としての数nの最良の表現は、JavaScript演算子ToStringをnに適用して得られた文字列です。

これは、フォーマットが常に数値の評価と一致し、その数値に対してJavaScriptのtoStringを使用することを意味します。したがって、末尾の0はありません。

したがって、JavaScriptに頼る必要があります。 document.getElementById('numInput').value = '0.50';はまだ0.5に修正されるため、これは簡単ではありません。したがって、検証はデフォルトのアクションを防ぐことができるonchangeでトリガーされず、内部でトリガーされます。

これは私が思いつくことができる最良の解決策です...それは少しハックであり、堅牢性のために少し調整する必要がありますが、うまくいけばそれはあなたが望むことをするでしょう：

var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
    this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
    this.setAttribute('type', 'number');
});

したがって、ユーザーが入力して数字を入力したい場合は、入力タイプをテキストに切り替えますが、ユーザーがクリックすると、数字に変換し直します。

ユーザーが何を入力しても、常に末尾の0が必要な場合は、次のようにすることができます。

var numInput = document.getElementById('numInput');
numInput.addEventListener('blur', function () {
    if (this.value === '') {
        return;
    }
    this.setAttribute('type', 'text');
    if (this.value.indexOf('.') === -1) {
        this.value = this.value + '.00';
    }
    while (this.value.indexOf('.') > this.value.length - 3) {
        this.value = this.value + '0';
    }
});
numInput.addEventListener('focus', function () {
    this.setAttribute('type', 'number');
});

編集：2番目の解決策は、ユーザーが期待するものとより一致していると思いますが、ユーザーが0.5と入力すると0.50に強制されるので、それが必要かどうかによって異なります。

11
Nathan MacInnes

末尾の0にしたい入力にon（ 'change'）イベントを添付しました

$('.number-input').on('change', function(){
    $(this).val(parseFloat($(this).val()).toFixed(2));
});

値を取得してfloatにキャストし、小数点以下の桁数の文字列にレンダリングして、値として戻します。

9
Jacob Valenta