web-dev-qa-db-fra.com

html5 entrée pour argent/devise

Je semble incapable de déterminer ce qu'il faut utiliser pour accepter des valeurs monétaires sur un formulaire.

J'ai essayé...

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

Mais cela ne permettra pas d’entrées de sous.

Je veux que le bouton de contrôle incrémentiel monte en livres, mais je veux tout de même pouvoir entrer un pence.

Qui voudrait utiliser un bouton incrémentiel déplaçant 1p à la fois?

J'utilise peut-être le mauvais contrôle, mais je ne trouve pas de contrôle argent/devise?

Quelqu'un peut-il conseiller le meilleur moyen d'accepter les valeurs monétaires (y compris les virgules, les décimales et le symbole monétaire) à l'aide de HTML5?

Merci, 1DMF 

html5currency-formatting
54
1DMF

Afin d'autoriser les fractions (cents) sur une entrée de numéro HTML5, vous devez spécifier l'attribut "step" à = "any":

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

Cela empêchera spécifiquement Chrome d’afficher une erreur lorsqu’une devise décimale/fractionnaire est entrée dans l’entrée. Mozilla, IE, etc ... ne vous trompez pas si vous oubliez de spécifier step="any". Les spécifications du W3C stipulent que step = "any" devrait effectivement être nécessaire pour permettre les décimales. Donc, vous devriez certainement l'utiliser.

De plus, la saisie numérique est maintenant assez largement prise en charge (> 90% des utilisateurs).

44
karns

Essayez d'utiliser step="0.01", puis il vous fera gagner un sou à chaque fois 

par exemple:

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

32
Travis Reeder

En fin de compte, j’ai dû faire un compromis en implémentant une solution HTML5/CSS, en renonçant aux boutons d’incrémentation dans IE (ils sont quand même un peu cassés en FF!), Mais en obtenant la validation des chiffres que JQuery spinner ne fournit pas. . Bien que j'ai dû aller avec une étape de nombres entiers.

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>

La validation est un peu floconneuse sur les navigateurs, où IE/FF autorise les virgules et les décimales (tant que c'est .00), où Chrome/Opera ne le fait pas et ne veut que des chiffres.

J'imagine que c'est dommage que le spinner JQuery ne fonctionne pas avec une entrée de type nombre, mais la documentation indique explicitement de ne pas le faire :-( et je suis perplexe quant à la raison pour laquelle un widget spinner de nombre permet la saisie d'un caractère ascii?

3
1DMF

Utilisation de Number.prototype.toLocaleString de javascript :

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' />

0
vsync

Nous avons eu le même problème pour accepter les valeurs monétaires pour l'euro, car <input type="number" /> ne peut pas afficher le format décimal et la virgule pour l'euro. 

Nous avons trouvé une solution, d'utiliser <input type="number" /> pour la saisie de l'utilisateur. Une fois que l’utilisateur a saisi la valeur, nous la formaterons et l’afficherons au format Euro en passant simplement à <input type="text" />. Ceci est une solution Javascript cependant, car vous avez besoin d’une condition pour choisir entre les modes "utilisateur est en train de taper" et "affichage à l’utilisateur".

Voici le lien avec les visuels à notre solution: Problème de type de champ "Devise" résolu

J'espère que cela aide d'une certaine manière!

0
nana janashia