web-dev-qa-db-ja.com

<input type = "number" />で値を通貨に設定します

JavaScriptを使用して、ユーザーが入力した数値を通貨にフォーマットしようとしています。これは<input type="text" />でうまく機能します。ただし、<input type="number" />では、数値以外の値を含むものに値を設定することはできないようです。次のフィドルは私の問題を示しています

http://jsfiddle.net/2wEe6/72/

とにかく$125.00のような値を設定する方法はありますか？

<input type="number" />を使用して、モバイルデバイスが数字入力用のキーボードを表示するようにします。

javascriptjqueryhtmlhtml5currency-formatting
56
Danny

最後に、<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" />
19
Danny

step="0.01"を<input type="number" />パラメーターに追加します。

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

デモ： http://jsfiddle.net/uzbjve2u/

ただし、ドル記号はテキストボックスの外側に配置する必要があります。すべての非数値または区切り文字は自動的にトリミングされます。

それ以外の場合は、従来のテキストボックス ここで説明したような を使用できます。

64
Andrea Ligios

あなたたちは完全に正しい数字は数値フィールドにのみ入れることができます。既に記載されているものとまったく同じものを使用しますが、spanタグには少し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;
}
8
William Hagan

通貨の選択リストと値の数値フィールドの2つのフィールドが必要なようです。

そのような場合の一般的な手法は、表示にdivまたはスパンを使用し（画面外のフォームフィールド）、クリックして編集するためにフォーム要素に切り替えます。

3
Christophe