web-dev-qa-db-ja.com

お金/通貨のhtml5入力

フォームの金銭的価値を受け入れるために何を使用すべきかを判断できないようです。

私が試してみました...

<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">

しかし、それはペンスのエントリを許可しません。

増分ボタンコントロールをポンド単位で上げたいが、それでもペンスを入力できるようにしたい。

一度に1p移動するインクリメンタルボタンを使用したいのは誰ですか？

おそらく間違ったコントロールを使用していますが、お金/通貨のコントロールが見つかりませんか？

HTML5を使用して金銭的価値（コンマ、小数点以下の桁、通貨記号を含む）を受け入れるための最良の方法を誰かにアドバイスしてください

ありがとう、1DMF

html5currency-formatting
60
1DMF

HTML5数値入力で小数部（セント）を許可するには、「step」属性を=「any」に指定する必要があります。

<input type="number" min="1" step="any" />

これにより、10進/小数通貨が入力に入力されたときにChromeがエラーを表示しないようにします。 Mozilla、IEなど... step="any"の指定を忘れてもエラーになりません。 W3Cの仕様では、小数を許可するにはstep = "any"が実際に必要であると規定されています。だから、あなたは間違いなくそれを使用する必要があります。

また、数値入力は現在かなり広くサポートされています（ユーザーの90％以上）。

47
karns

step="0.01"を使用してみると、毎回1ペニーずつ進みます。

例えば：

<input type="number" min="0.00" max="10000.00" step="0.01" />
37
Travis Reeder

JavaScriptの Number.prototype.toLocaleString を使用：

var currencyInput = document.querySelector('input[type="currency"]');
var currency = 'GBP'; // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

currencyInput.addEventListener('focus', onFocus);
currencyInput.addEventListener('blur', onBlur);

function localStringToNumber( s ){
    return Number(String(s).replace(/[^0-9.-]+/g,""));
}

function onFocus(e){
  var value = e.target.value;
  e.target.value = value ? localStringToNumber(value) : '';
}

function onBlur(e){
  var value = e.target.value;

  const options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}
input{
  padding: 10px;
  font: 20px Arial;
}
<input type='currency' />
5
vsync

最後に、HTML5/CSSソリューションを実装することで妥協する必要がありました。IEのインクリメントボタンを無視しました（とにかくFFで少し壊れました！）が、JQueryスピナーではない番号検証を取得しました。提供します。私は整数のステップで行かなければならなかったけれども。

span.gbp {
    float: left;
    text-align: left;
}

span.gbp::before {
    float: left;
    content: "\00a3"; /* £ */
    padding: 3px 4px 3px 3px;
}

span.gbp input {
     width: 280px !important;
}
<label for="broker_fees">Broker Fees</label>
<span class="gbp">
    <input type="number" placeholder="Enter whole GBP (&pound;) or zero for none" min="0" max="10000" step="1" value="" name="Broker_Fees" id="broker_fees" required="required" />
</span>

IE/FFではコンマと小数点以下（.00である限り）が許可されますが、Chrome/Operaでは数値が必要ないため、検証はブラウザー間で多少不安定です。

JQueryスピナーが数値型の入力で動作しないのは残念だと思いますが、ドキュメントでは明示的にそれを行わないと述べています:-(そして、数値スピナーウィジェットがASCII文字の入力を許可する理由については困惑していますか？

2
1DMF

<input type="number" />はユーロの10進数とコンマの形式を表示できないため、ユーロの通貨値を受け入れる場合にも同じ問題がありました。

ユーザー入力に<input type="number" />を使用するソリューションを考え出しました。ユーザーが値を入力したら、<input type="text" />に切り替えるだけで、その形式を設定し、ユーロ形式で表示します。ただし、これはJavascriptソリューションです。「ユーザーが入力中」モードと「ユーザーに表示」モードを決定する条件が必要だからです。

ここで、ビジュアルへのソリューションへのリンク： 入力フィールドタイプ「通貨」問題解決

これが何らかの形で役立つことを願っています！

0
nana janashia