it-swarm.com.de

Setzen Sie den Wert auf Währung in <input type = "number" />

Ich versuche, eine vom Benutzer eingegebene Zahl mit Javascript in eine Währung umzuwandeln. Dies funktioniert gut bei <input type="text" />. Bei <input type="number" /> Kann ich den Wert jedoch anscheinend nicht auf einen Wert setzen, der nicht numerische Werte enthält. Die folgende Geige zeigt mein Problem

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

Kann ich den Wert trotzdem auf so etwas wie $125.00 Setzen?

Ich möchte <input type="number" /> Verwenden, damit mobile Geräte eine Tastatur für die Zahleneingabe aufrufen können.

56
Danny

Am Ende habe ich ein jQuery-Plugin erstellt, das den <input type="number" /> Entsprechend für mich formatiert. Ich habe auch festgestellt, dass auf einigen Mobilgeräten die Attribute min und max Sie nicht daran hindern, niedrigere oder höhere Zahlen als angegeben einzugeben, sodass das Plugin dies ebenfalls berücksichtigt. Unten ist der Code und ein Beispiel:

(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

Hinzufügen step="0.01" zum <input type="number" /> parameter:

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

Demo: http://jsfiddle.net/uzbjve2u/

Das Dollarzeichen muss sich jedoch außerhalb des Textfelds befinden. Jeder nicht numerische oder Trennzeichenzeichner wird automatisch zugeschnitten.

Ansonsten könnten Sie ein klassisches Textfeld verwenden, wie hier beschrieben .

64
Andrea Ligios

Ihr seid vollkommen richtig, Zahlen können nur im numerischen Feld eingegeben werden. Ich verwende genau das Gleiche wie das, was bereits mit ein bisschen CSS-Styling auf einem span-Tag aufgeführt ist:

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

Dann füge ein bisschen Styling-Magie hinzu:

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

Es scheint, dass Sie zwei Felder benötigen, eine Auswahlliste für die Währung und ein Zahlenfeld für den Wert.

In solchen Fällen ist es üblich, ein Div oder einen Span für die Anzeige zu verwenden (Formularfelder außerhalb des Bildschirms) und mit einem Klick zu den Formularelementen zum Bearbeiten zu wechseln.

3
Christophe