HTML5-Eingabe für Geld / Währung

Ich kann anscheinend nicht herausfinden, wie ich Geldwerte auf einem Formular akzeptieren soll.

Ich habe versucht...

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

Aber das erlaubt dann keine Pence-Einträge.

Ich möchte, dass die inkrementelle Tastensteuerung in Pfund ansteigt, möchte aber trotzdem die Möglichkeit, Pence einzugeben.

Wer möchte eine inkrementelle Schaltfläche verwenden, die sich jeweils um 1 Pence bewegt?

Vielleicht verwende ich die falsche Kontrolle, aber ich kann keine Geld- / Währungskontrolle finden?

Kann jemand bitte den besten Weg empfehlen, Geldwerte (einschließlich Kommas, Dezimalstellen und Währungssymbole) mit HTML5 zu akzeptieren?

Danke, 1DMF

Aktivieren von Brüchen / Cent / Dezimalstellen für die Zahleneingabe

Um Brüche (Cent) für eine HTML5-Zahleneingabe zuzulassen, müssen Sie das Attribut "step" für = "any" angeben:

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

Dies verhindert insbesondere, dass Chrome einen Fehler anzeigt, wenn eine Dezimal- / Bruchwährung in die Eingabe eingegeben wird. Mozilla, IE usw. ... treten keine Fehler auf, wenn Sie die Angabe vergessen step="any". Die W3C-Spezifikation besagt, dass step = "any" tatsächlich erforderlich sein sollte, um Dezimalstellen zu berücksichtigen. Sie sollten es also unbedingt verwenden. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

Beachten Sie, dass Sie einen numerischen Schritt wie ".01" angeben müssen, wenn die Auf- / Ab-Schaltflächen eine bestimmte Granularität aufweisen sollen.

Außerdem wird die Zahleneingabe mittlerweile weitgehend unterstützt (> 90% der Benutzer).

Welche Eingabemöglichkeiten gibt es für Geld / Währung?

Der Titel der Frage hat sich inzwischen geändert und erhält eine etwas andere Bedeutung. Man könnte sowohl Zahlen- als auch Texteingaben verwenden, um Geld / Dezimalstellen zu akzeptieren.

Für ein Eingabefeld für Währung / Geld wird empfohlen, den Eingabetyp der Zahl zu verwenden und die entsprechenden Attribute wie oben beschrieben anzugeben. Ab 2020 gibt es keine W3C-Spezifikation für eine tatsächliche Eingabe von Währung oder Geld.

Der Hauptgrund dafür ist, dass die Benutzer automatisch gezwungen werden, ein gültiges Standardwährungsformat einzugeben, und dass alphanumerischer Text nicht zulässig ist. Wenn dies gesagt ist, können Sie sicherlich die reguläre Texteingabe verwenden und eine Nachbearbeitung durchführen, um nur den numerischen / dezimalen Wert abzurufen (dies sollte auch irgendwann serverseitig überprüft werden).

Das OP legte eine Anforderung an Währungssymbole und Kommas fest. Wenn Sie eine schickere Logik / Formatierung wie diese wünschen (ab 2020), müssen Sie eine benutzerdefinierte JS-Logik für eine Texteingabe erstellen oder ein Plugin suchen.

Versuchen Sie es mit step="0.01", dann wird es jedes Mal um einen Cent gehen.

z.B:

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

Verwenden von Number.prototype.toLocaleString von Javascript :

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

 // format inital value
onBlur({target:currencyInput})

// bind event listeners
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

  var options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

input{
  padding: 10px;
  font: 20px Arial;
  width: 70%;
}

<input type='currency' value="123" placeholder='Type a number & click outside' />

Nun, am Ende musste ich Kompromisse eingehen, indem ich eine HTML5 / CSS-Lösung implementierte, auf Inkrement-Schaltflächen im IE verzichtete (sie sind in FF sowieso ein bisschen kaputt!), Aber eine Nummernüberprüfung erhielt, die der JQuery-Spinner nicht bietet. Obwohl ich mit einem Schritt von ganzen Zahlen gehen musste.

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>

Die Validierung ist in allen Browsern etwas unübersichtlich, in denen IE / FF Kommas und Dezimalstellen zulässt (solange es sich um 0,00 handelt), in Chrome / Opera nicht und nur Zahlen.

Ich denke, es ist eine Schande, dass der JQuery-Spinner nicht mit einer Zahlentyp-Eingabe funktioniert, aber die Dokumente geben ausdrücklich an, dies nicht zu tun :-( und ich bin verwirrt, warum ein Zahlen-Spinner-Widget die Eingabe eines ASCII-Zeichens erlaubt?

Wir hatten das gleiche Problem beim Akzeptieren von Geldwerten für Euro, da <input type="number" />das Euro-Dezimal- und Komma-Format nicht angezeigt werden kann.

Wir haben eine Lösung gefunden, die wir nutzen können <input type="number" /> für Benutzereingaben verwendet werden kann. Nachdem der Benutzer den Wert eingegeben hat, formatieren wir ihn und zeigen ihn durch einfaches Umschalten als Euro-Format an <input type="text" />. Dies ist jedoch eine Javascript-Lösung, da Sie eine Bedingung benötigen, um zwischen den Modi "Benutzer tippt" und "Für Benutzer anzeigen" zu entscheiden.

Hier der Link mit Visuals zu unserer Lösung: Eingabefeldtyp "Währung" Problem gelöst

Hoffe das hilft irgendwie!

Einfacher und schöner, wenn Sie vue.js v-money- spinner haben :)