一部のブラウザinput type="number"は数値の表記をローカライズしているのを見てきました。
そのため、アプリケーションで経度と緯度の座標が表示されるフィールドでは、「51,983」のようなものが表示されますが、「51.982559」である必要があります。私の回避策はinput type="text"代わりにを使用することですが、小数点が正しく表示された数値入力を使用したいと思います。
クライアント側のローカル設定に関係なく、ブラウザに数値入力に小数点を使用させる方法はありますか？
（言うまでもなく、私のアプリケーションではサーバー側でこれを修正しますが、セットアップではクライアント側でも修正する必要があります（JavaScriptがあるため））。
前もって感謝します。
更新
現時点では、Windows7でChromeバージョン28.0.1500.71mをチェックインすると、数値入力はコンマでフォーマットされた小数を受け入れません。step属性を使用して提案された提案は機能しないようです。
回答:
現在、Firefoxは入力が存在するHTML要素の言語を尊重します。たとえば、Firefoxで次のフィドルを試してください。
http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/
数字がアラビア語であり、アラビア語の場合のように、コンマが小数点記号として使用されていることがわかります。これは、BODYタグに属性が与えられているためですlang="ar-EG"。
次に、これを試してください：
http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/
これは、入力がDIV特定の属性でラップされているため、小数点記号としてドットで表示されますlang="en-US"。
したがって、あなたが頼ることができる解決策は、小数点としてドットを使用するカルチャを使用するように設定されたコンテナ要素で数値入力をラップすることです。
lang入力要素に直接属性を設定できます。
lang属性には、実際に、感謝を私のために違いを作りましたよ！
必要な小数の精度に指定されたstep属性と、[ピリオドで小数をフォーマットするロケールに設定された] lang属性を使用すると、html5数値入力は小数を受け入れます。例えば。10.56のような値を取る。私は小数点以下2桁を意味します、これを行います：
<input type="number" step="0.01" min="0" lang="en" value="1.99">
最大許容値のmax属性をさらに指定できます。
編集コンマではなくポイントで小数をフォーマットするロケール値を使用して、入力要素にlang属性を 追加します
残念ながら、最近のブラウザでは、この入力フィールドのカバレッジは非常に低くなっています。
http://caniuse.com/#feat=input-number
したがって、フィールドが一般的に受け入れられるまで、フォールバックを予期し、プログラムでロードされた重いinput [type = text]に依存してジョブを実行することをお勧めします。
これまでのところ、Chrome、Safari、Operaだけが適切に実装されていますが、他のすべてのブラウザにはバグがあります。それらのいくつかは、小数をサポートしていないようです（BB10など）！
これが役立つかどうかはわかりませんが、入力の観点からのみ、この同じ問題を検索するときにここでつまずきました（つまり<input type="number" />、値を入力するときにコンマとドットの両方を受け入れていることに気付きましたが、後者だけが入力に割り当てたangularjsモデルにバインドされています）。だから私はこの簡単な指示を書き留めることによって解決しました：
.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の観点から）数値を入力できないように、オンザフライでコンマをドットに置き換えます。乾杯。
$("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});（ページがすべての数値入力とともに完全に読み込まれたら）
888,、valueプロパティを設定すると888.、有効な数値ではないことを示す警告がスローされ（正規表現では、ドットの後に少なくとも1つの数値が必要です）、フィールドが空白になります。ただし、ドットの入力は機能します。おそらく、入力はその値を「進行中」と見なし、さらに数字が入力されるのを待つためです
関連する何かを説明しているように見えるブログ記事を見つけました：
ChromeのHTML5入力タイプ=数値と小数/浮動小数点数
要約すれば：
step有効な値のドメインを定義するのに役立ちますstepは1minとの間をmax含みます）これは、カンマを1000の区切り文字として使用するのか、コンマを小数点として使用するのかというあいまいさと混同していると思います。51,983実際には、奇妙に解析された5万1千、9、8、3です。
どうやらあなた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）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/をチェックしてください
これがあなたの問題を解決することを願っています
pattern="\d+\.\d{2}"私はそのようなUXを受け入れ可能と呼ぶことさえあります...しかし、私はjqueryの部分を削除します...
パターンを使用する
<input
type="number"
name="price"
pattern="[0-9]+([\.,][0-9]+)?"
step="0.01"
title="This should be a number with up to 2 decimal places."
>
幸運を
これを行うためのカスタムコードを作成しました
に置き換える場合,は.、translate_decimals関数を完全に削除してください。
var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');
function translate_decimals(side = 0)
{
input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');
bincr.addEventListener('click', ()=>{
if (input.hasAttribute('max'))
{
if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
{
return;
}
else
{
translate_decimals('.');
let temp = input.value;
input.value = "";
input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
translate_decimals(',');
}
}
});
bdecr.addEventListener('click', ()=>{
if (input.hasAttribute('min'))
{
if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
{
return;
}
else
{
translate_decimals('.');
input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
translate_decimals(',');
}
}
});/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
width:32px;
}<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>小数点の代わりにコンマを使用して値を入力できるようにする必要がありました。これは昔からの問題のようです。背景情報は、次のリンクにあります。
私はついにjQueryを少し使ってそれを解決しました。カンマをドットonChangeに置き換えます。これは、最新のFirefox、Chrome、Safariでこれまでのところうまく機能しているようです。
$('input[type=number]').each(function () {
$(this).change(function () {
var $replace = $(this).val().toString().replace(/,/g, '.');
$(this).val($replace);
})
});
<input type="number" name="points" step="3">
例：step = "3"の場合、有効な番号は-3、0、3、6などになります。
ヒント：step属性をmax属性およびmin属性と一緒に使用して、有効な値の範囲を作成できます。
注： step属性は、数値、範囲、日付、日時、日時-ローカル、月、時刻、および週の入力タイプで機能します。
step="3"入力を整数のみに制限します。そして、設定はstep="0.01"まだそれを昏睡状態として示しています; c