web-dev-qa-db-fra.com

Définissez la valeur sur devise dans <input type = "number" />

J'essaie de formater un nombre saisi par l'utilisateur en devise à l'aide de javascript. Cela fonctionne bien sur <input type="text" />. Cependant, sur <input type="number" /> Je n'arrive pas à définir la valeur sur un élément contenant des valeurs non numériques. Le violon suivant montre mon problème

http://jsfiddle.net/2wEe6/72/

Est-il possible pour moi de définir la valeur à quelque chose comme $125.00?

Je veux utiliser <input type="number" /> afin que les appareils mobiles sachent utiliser un clavier pour la saisie de nombres.

javascriptjqueryhtmlhtml5currency-formatting
56
Danny

Finalement, j'ai créé un plugin jQuery qui formaterait le <input type="number" /> convenablement pour moi. J'ai aussi remarqué que sur certains appareils mobiles, les attributs min et max ne vous empêchent pas d'entrer des nombres inférieurs ou supérieurs à ceux spécifiés. Le plug-in en tiendra compte également. Ci-dessous, le code et un exemple:

(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" />
19
Danny

Ajouter step="0.01" à la <input type="number" /> paramètres:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

Démo: http://jsfiddle.net/uzbjve2u/

Mais le signe Dollar doit rester en dehors de la zone de texte ... chaque caractère non numérique ou séparateur sera automatiquement recadré.

Sinon, vous pouvez utiliser une zone de texte classique, comme décrit ici .

64
Andrea Ligios

Vous avez tout à fait raison, les chiffres ne peuvent figurer que dans le champ numérique. J'utilise exactement la même chose que celle déjà listée avec un peu de style css sur une balise span:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

Ensuite, ajoutez un peu de magie de style:

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}
8
William Hagan

Il semble que vous aurez besoin de deux champs, une liste de choix pour la devise et un champ numérique pour la valeur.

Une technique courante dans ce cas consiste à utiliser un div ou un span pour l'affichage (champs de formulaire hors écran), puis à cliquer sur les éléments de formulaire pour les éditer.

3
Christophe