[解決済み] <input type="number" />に値を通貨に設定する。
2022-03-12 21:16:50
質問
javascriptを使用して、ユーザーが入力した数値を通貨に変換しようとしています。これは
<input type="text" />
. しかし
<input type="number" />
数値以外を含む値を設定することができないようです。以下のフィドルは、私の問題を示しています。
のような値を設定することはできませんか?
$125.00
?
を使いたいのですが
<input type="number" />
携帯端末が数字入力のためにキーボードを表示することを認識できるようにします。
解決方法は?
最終的に、私はjQueryプラグインを作成し、そのプラグインで
<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" />
関連
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
[解決済み] HTMLのinputboxでjQueryを使って数字(0-9)だけを許可する方法は?
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。