ユーザーが入力した数値をJavaScriptを使用して通貨にフォーマットしようとしています。これはで正常に機能し<input type="text" />ます。ただし、では、<input type="number" />数値以外の値を含むものに値を設定できないようです。次のフィドルは私の問題を示しています
とにかく値を次のように設定することはでき$125.00ますか？
<input type="number" />モバイルデバイスが数字入力用のキーボードを起動することを知っているように使用したいと思います。
パラメータに追加step="0.01"します。<input type="number" />
<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />
デモ： http： //jsfiddle.net/uzbjve2u/
ただし、ドル記号はテキストボックスの外側に配置する必要があります...すべての非数値または区切り文字は自動的にトリミングされます。
それ以外の場合は、ここで説明するような従来のテキストボックスを使用できます。
<input type="number" />最終的に、適切にフォーマットするjQueryプラグインを作成しました。また、一部のモバイルデバイスでは、属性minとmax属性によって、指定された数値よりも小さい数値または大きい数値を入力できなくなることはないため、プラグインもそれを考慮します。以下はコードと例です。
(function($) {
$.fn.currencyInput = function() {
this.each(function() {
var wrapper = $("<div class='currency-input' />");
$(this).wrap(wrapper);
$(this).before("<span class='currency-symbol'>$</span>");
$(this).change(function() {
var min = parseFloat($(this).attr("min"));
var max = parseFloat($(this).attr("max"));
var value = this.valueAsNumber;
if(value < min)
value = min;
else if(value > max)
value = max;
$(this).val(value.toFixed(2));
});
});
};
})(jQuery);
$(document).ready(function() {
$('input.currency').currencyInput();
});.currency {
padding-left:12px;
}
.currency-symbol {
position:absolute;
padding: 2px 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />あなたたちは完全に正しい数字は数字のフィールドにしか入ることができません。スパンタグに少しcssスタイルを付けて、すでにリストされているものとまったく同じものを使用します。
<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">
次に、スタイリングの魔法を少し追加します。
span{
position:relative;
margin-right:-20px
}
input[type='number']{
padding-left:20px;
text-align:left;
}
通貨の選択リストと値の数値フィールドの2つのフィールドが必要になるようです。
このような場合の一般的な手法は、表示にdivまたはspanを使用し（フォームフィールドは画面外）、クリックすると編集用のフォーム要素に切り替えます。
ブラウザは、タイプが「数値」に設定されている場合にのみ数値入力を許可します。詳細はこちら。
type = "text"を使用し、ここで説明するようにJavaScriptを使用して数値入力以外のものを除外できます。