web-dev-qa-db-ja.com

HTML5数値入力でのコンマの代わりに小数点を強制する（クライアント側）

一部のブラウザは、数字のinput type="number"表記をローカライズするのを見てきました。

そのため、アプリケーションが経度と緯度の座標を表示するフィールドで、「51,983」のようなものを取得しますが、「51.982559」になります。私の回避策は、代わりにinput type="text"を使用することですが、小数の正しい表示で数値入力を使用したいと思います。

クライアント側のローカル設定に関係なく、ブラウザが数値入力に小数点を使用する方法はありますか？

（言うまでもなく、私のアプリケーションではサーバー側でこれを修正しますが、セットアップではクライアント側でも修正する必要があります（JavaScriptが原因です））。

前もって感謝します。

[〜＃〜] update [〜＃〜]今のところ、Chromeバージョン28.0.1500.71 m、Windows 7では、数値入力はカンマでフォーマットされた小数を受け入れません。stepattributeで提案された提案は機能しないようです。

http://jsfiddle.net/AsJsj/

html5inputtypesnumbersdecimal
64
chocolata

step属性を必要な小数の精度に指定すると、html5数値入力は小数を受け入れます。例えば。 10.56のような値を取るため。私は2つの小数点以下の桁数を意味し、これを行います：

<input type="number" step="0.01" min="0" lang="en" value="1.99">

さらに、最大許容値にmax属性を指定できます。

Editを追加langコンマの代わりにポイントで小数をフォーマットするロケール値を持つ入力要素の属性

17
Peter

現在、Firefoxは入力が存在するHTML要素の言語を尊重します。たとえば、Firefoxで次のフィドルを試してください。

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

数字はアラビア語であり、アラビア語の場合はコンマが小数点として使用されていることがわかります。これは、BODYタグにlang="ar-EG"属性が与えられているためです。

次に、これを試してください：

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

入力は属性lang="en-US"で指定されたDIVでラップされるため、これは小数点としてドットで表示されます。

したがって、解決策は、小数点を小数点として使用するカルチャを使用するように設定されたコンテナ要素で数値入力をラップすることです。

17
Ashraf Sabry

spec に従って、any属性の値としてstepを使用できます。

<input type="number" step="any">
8
Halil Özgür

入力にlang属性を使用します。私のWebアプリfr_FRのロケール、入力番号のlang = "en_EN"を使用すると、カンマまたはドットを区別なく使用できます。 Firefoxは常にドットを表示し、Chromeコンマを表示します。ただし、両方のsepartorは有効です。

2
zian974

悲しいことに、最新のブラウザでのこの入力フィールドのカバレッジは非常に低いです。

http://caniuse.com/#feat=input-number

したがって、フォールバックを予想し、フィールドが一般に受け入れられるまで、プログラムでロードされた大量のinput [type = text]を使用してジョブを実行することをお勧めします。

これまでのところ、Chrome、Safari、およびOperaのみがきちんと実装されていますが、他のすべてのブラウザにはバグがあります。

2
opalenzuela

関連する何かを説明しているように見えるブログ記事を見つけました：
HTML5入力タイプ= Chromeの数値と小数点/浮動小数点数

要約すれば：

  • stepは、有効な値のドメインを定義するのに役立ちます
  • デフォルトのstepは_1_です
  • したがって、デフォルトのドメインは整数です（指定されている場合、minとmaxの間）。

私は、コンマを小数点としてコンマを使用することとコンマを小数点として使用することのあいまいさを混同していると仮定します。そして、あなたの_51,983_は実際には五十一九九八三です。

どうやら_step="any"_を使用して、範囲内のすべての有理数にドメインを広げることができますが、私は自分で試していません。緯度と経度については、私は正常に使用しました：

_<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">
_

きれいではないかもしれませんが、動作します。

1
Matty K

これが役立つかどうかはわかりませんが、この同じ問題を検索するときに、inputの観点からのみつまずきました（つまり、私の<input type="number" />は、値を入力するときにコンマとドットの両方を受け入れていましたが、後者だけが、入力に割り当てたanglejsモデルにバインドされていました）。そこで、この簡単な指令を書き留めて解決しました。

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

次に、私のhtmlで、単に<input type="number" ng-model="foo" replace-comma />は、カンマをその場でドットに置き換えて、ユーザーが無効な（ロケールではなくJavaScriptの観点から）数値を入力できないようにします。乾杯。

1
Andrea Aloi

1）51,983は文字列型の数値で、カンマは使用できません

したがって、テキストとして設定する必要があります

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

と置換する 。

タイプ属性を数値に変更します

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

チェックアウト http://jsfiddle.net/ydf3kxgu/

これで問題が解決することを願っています

0
Selvin

このためにJavaScriptを使用することを検討しましたか？

$('input').val($('input').val().replace(',', '.'));

0
mhrvatin

1つのオプションはjavascript parseFloat()...です。「text chain" --> 12.3456 intへのポイントで... 123456（intはポイントを削除）FLOATへのテキストチェーンを解析...

この座標をサーバーに送信するには、テキストチェーンを送信します。 HTTPはTEXTのみを送信します

クライアントでは、「int」を使用して入力座標を解析しないようにし、テキスト文字列を処理します

phpなどでHTMLのコードを印刷する場合...テキストにフロートしてHTMLで印刷する

0
Llanis

私の知る限り、HTML5 input type="numberは常にinput.valueをstringとして返します。

どうやら、input.valueAsNumberは現在の値を浮動小数点数として返します。これを使用して、必要な値を返すことができます。

http://diveintohtml5.info/forms.html#type-number を参照してください

0
Jason Gennaro