HTML5-Eingabe für Geld / Währung

78

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

html  currency-formatting 
— 1DMF
quelle
Sie müssen das stepAttribut mit Dezimalstellen angeben . Siehe: Gibt es einen Float-Eingabetyp in HTML (5)?
— Feeela
1
Bitte lesen Sie die Frage noch einmal und stellen Sie sicher, dass Sie verstehen, dass ich dies bereits getan habe und dass dies zu unerwünschten Ergebnissen führt. Wie kann dies unter diesen Umständen eine Verdoppelung des anderen Threads sein?
— 1DMF
Nun, Sie fragen nach "dem besten Weg, Geldwerte zu akzeptieren". Das Akzeptieren einer Eingabe ist nicht dasselbe wie das Bereitstellen alternativer Eingabemethoden. Mit einer Zahleneingabe kann der Benutzer weiterhin direkt eine gültige Nummer eingeben, die den angegebenen Attributen entspricht. Sie können noch zusätzliche Schaltflächen hinzufügen, die um Pfund erhöht werden…
— feeela
Leider können Sie dies mit HTML5 nicht steuern. Aber vielleicht könnte dies für Sie interessant sein: jsfiddle.net/trixta/UC6tG/embedded/result,html,js,css
— alexander farkas
Danke Farkas, aber ich kann es scheinbar nicht zum Laufen bringen, die Drehknöpfe machen nichts und ich kann auch die Eingabe nicht eingeben. Scheint in FF zu funktionieren, aber nicht in IE
— 1DMF

Antworten:

65

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.

— Karns
quelle
52

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" />
Erweitern Sie das Snippet

— Travis Reeder
quelle
3
Das funktioniert gut. Es ist jedoch erwähnenswert, dass Zahlen wie "1,28 ... 1,29 ... 1,3 ... 1,31 ..." durchlaufen werden . Dh nachgestellte Nullen fehlen (weil es sich um eine Zahl handelt, die keine Währung ist). Verwandte Themen: Wie kann ich dafür sorgen, dass im HTML5-Nummernfeld nachgestellte Nullen angezeigt werden?
— Duncan Jones
und denken Sie daran, dass nicht alle Sprachen Dezimalstellen für ihr Währungssystem verwenden.
— Amirreza
28

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' />
Erweitern Sie das Snippet

— vsync
quelle
Dies ist eine ordentliche Lösung. Beachten Sie jedoch, dass die Konvertierung von localStringToNumber für Benutzer in einigen Ländern fehlschlägt. Beispielsweise verwendet Frankreich ein Komma als Dezimalpunkt. In diesem Fall wird der Startwert von 123 (korrekt) in 123,00 konvertiert, ändert sich dann jedoch bei Fokus auf 12300 und bei Unschärfe auf 12300,00. Im Wesentlichen multipliziert jeder Fokus und jede Unschärfe versehentlich den Wert mit 100!
— Peterhead
@peteredhead - wie reproduzieren? Haben Sie die currencyVariable in etwas anderes geändert ?
— vsync
Das erste Argument von toLocaleString ist das Gebietsschema, das für die Formatierung verwendet werden soll. In Ihrem Code ist er auf undefiniert gesetzt und verwendet daher die Browser- / Systemeinstellungen. Wenn Sie testen möchten, wie es für einen Benutzer in einem anderen Land funktionieren würde, können Sie es beispielsweise auf "fr-FR" setzen
— peteredhead
Sehr interessant. Hier ist eine Liste der Länder, die Komma gegen Dezimalpunkt verwenden
— vsync
Ich sehe, dass es sehr schwierig ist , Zahlen (an verschiedenen Orten, die als Strings dargestellt werden ) wieder in Zahlen umzuwandeln . Es gibt viele verschiedene Zahlensysteme. Dazu müsste das richtige Gebietsschema ermittelt und eine entsprechende Transformationsfunktion angewendet werden. Viele Transformationsfunktionen müssen im Voraus vorbereitet werden, wodurch die Codebasis aufgebläht wird. so traurig.
— vsync
2

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>
Erweitern Sie das Snippet

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?

— 1DMF
quelle
1
JSFiddle von oben - jsfiddle.net/yz9w9g3r Tweak von JSFiddle, aber mit Schritt jede und bessere Positionierung des Währungszeichens - jsfiddle.net/yz9w9g3r/1
— Scraymer
Großartig, aber es sollte beachtet werden, dass dies keine sehr internationale Lösung ist. ( Andererseits haben Browser i18n noch nicht <input type="number">richtig ausgearbeitet : stackoverflow.com/questions/15303940/… )
— Michael Scheper
0

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!

— Nana Janashia
quelle
-3 

var currencyInput = document.querySelector('input[type="currency"]')
var currency = 'USD' // 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' />

— Prateek Gupta
quelle
Bitte fügen Sie auch einige erläuternde Kommentare hinzu
— Valentino Ru
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.