[解決済み] <input type="number" />の値を通貨に設定する。
2022-02-07 02:52:10
質問事項
javascriptを使用して、ユーザーが入力した数値を通貨に変換しようとしています。これは
<input type="text" />
. しかし
<input type="number" />
数値以外を含む値を設定することができないようです。以下のフィドルは、私の問題を示しています。
のような値を設定することはできませんか?
$125.00
?
を使いたいのですが
<input type="number" />
携帯端末が数字入力のためにキーボードを表示することを認識できるようにします。
解決方法は?
最終的に、このプラグインで
<input type="number" />
を適切に表示してくれます。また、いくつかのモバイルデバイスでは
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" />
関連
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] 数字を通貨文字列としてフォーマットする方法
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み】Uncaught TypeError: 未定義のプロパティ 'msie' を読み取れない - jQuery tools
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み] HTMLのinputboxでjQueryを使って数字(0-9)だけを許可する方法は?