javascript - money - input type number thousand separator

Establezca el valor en la moneda en<tipo de entrada="número"/>

Question

Estoy tratando de formatear un número ingresado por el usuario en moneda usando javascript. Esto funciona bien en <input type="text" /> . Sin embargo, en <input type="number" /> parece que no puedo establecer el valor en algo que contenga valores no numéricos. El siguiente violín muestra mi problema.

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

¿Hay alguna forma para que yo establezca el valor en algo así como $125.00 ?

Quiero usar <input type="number" /> para que los dispositivos móviles sepan cómo abrir un teclado para ingresar números.

Answer 1

Agregue step="0.01" a los <input type="number" /> parámetros de <input type="number" /> :

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

Demostración: http://jsfiddle.net/uzbjve2u/

Pero el signo de dólar debe permanecer fuera del cuadro de texto ... cada carácter no numérico o separador se recortará automáticamente.

De lo contrario, podría utilizar un cuadro de texto clásico, como se describe aquí .

Answer 2

Al final hice un complemento de jQuery que formateará el <input type="number" /> apropiada para mí. También noté que en algunos dispositivos móviles los atributos min y max realidad no le impiden ingresar números más bajos o más altos que los especificados, por lo que el complemento también lo tendrá en cuenta. A continuación se muestra el código y un ejemplo:

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

Answer 3

El navegador solo permite entradas numéricas cuando el tipo está configurado en "número". Detalles aquí .

Puede usar el tipo = "texto" y filtrar cualquier otra entrada que no sea numérica usando JavaScript como se describe aquí

Answer 4

Parece que necesitará dos campos, una lista de opciones para la moneda y un campo numérico para el valor.

Una técnica común en tal caso es usar un div o intervalo para la pantalla (campos de formulario fuera de la pantalla), y al hacer clic en los elementos del formulario para editarlos.

Answer 5

Ustedes son números completamente correctos, solo pueden ir en el campo numérico. Utilizo exactamente lo mismo que ya aparece en la lista con un poco de estilo css:

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

A continuación, agregue un poco de magia de estilo:

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