javascript - money - input type number thousand separator
Establezca el valor en la moneda en<tipo de entrada="nĂºmero"/> (5)
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í .
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.
¿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.
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" />
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í
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.
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;
}