1. ホーム
  2. javascript

[解決済み] <input type="number" />に値を通貨に設定する。

2022-03-12 21:16:50

質問

javascriptを使用して、ユーザーが入力した数値を通貨に変換しようとしています。これは <input type="text" /> . しかし <input type="number" /> 数値以外を含む値を設定することができないようです。以下のフィドルは、私の問題を示しています。

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

のような値を設定することはできませんか? $125.00 ?

を使いたいのですが <input type="number" /> 携帯端末が数字入力のためにキーボードを表示することを認識できるようにします。

解決方法は?

最終的に、私はjQueryプラグインを作成し、そのプラグインで <input type="number" /> を適切に表示してくれます。また、いくつかのモバイルデバイスでは minmax 属性は、実際には指定よりも小さい数字や大きい数字を入力することを妨げないので、プラグインはその点も考慮します。以下は、そのコードと例です。

(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" />