Crear la entrada de moneda en HTML
En este artículo, los usuarios aprenderán a convertir el campo HTML normal <input> en el campo de entrada de moneda. Usaremos HTML y jQuery para lograr nuestro objetivo.
Use el método JavaScript toFixed() para convertir <input> normal a entrada de moneda en HTML
En HTML, está disponible un elemento <input> normal, y podemos establecer su tipo de acuerdo con nuestros requisitos. No podemos hacer que el tipo sea una entrada de moneda simplemente configurando el tipo en número; necesitamos hacer más cambios usando JavaScript o jQuery.
Por ejemplo, podemos crear el campo <input> en HTML como se muestra a continuación; contiene algunos atributos. El atributo tipo sugiere el tipo de entrada que toma.
Los atributos min y max sugieren los valores numéricos mínimo y máximo que toma, respectivamente. El atributo id es la identificación única del elemento <input> y mediante el cual podemos acceder al elemento en jQuery.
<input type="number" id="currencyInput" min="0.1" max="5000000.0" value="99.9" />
Usaremos jQuery para convertir el campo anterior <input> en una entrada de moneda. Hemos creado la función anónima y la hemos almacenado en la variable inovkeCurrencyInput.
Los usuarios pueden ver cómo podemos crear una función anónima en jQuery a continuación.
$.fn.inovkeCurrencyInput = function() {
// function code
}
Ahora, agregaremos el detector de eventos cambiar usando jQuery en el elemento de entrada dentro de la función. Nos ayudará a detectar los cambios cada vez que escribamos algo en la entrada de números.
Aquí está el código jQuery para agregar el detector de eventos cambiar dentro de la función invokeCurrencyInput().
$(this).change(function() {
});
Después de eso, accederemos al valor de la entrada del número usando la propiedad valueAsNumber cada vez que un usuario agregue o elimine algo de la entrada del número. Además, accederemos a los atributos min y max del campo de entrada utilizando el método attr().
Después de acceder a los atributos min y max, analizaremos el valor flotante utilizando el método JavaScript parseFloat(), como se muestra a continuación.
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr('max'));
var minValue = parseFloat($(this).attr('min'));
Ahora, tenemos valores mínimos y máximos que puede aceptar el campo de entrada de moneda. Además, tenemos el valor actual del campo de entrada almacenado en la variable currencyValue.
Usando la instrucción if, comprobaremos si currencyValue está entre minValue y maxValue.
if (currencyvalue > maxValue) {
currencyvalue = maxValue;
}
if (currencyvalue < minValue) {
currencyvalue = minValue;
}
Usaremos el método number.toFixed(precision) para redondear el currencyValue a una precisión particular. En nuestro caso, el valor de precisión es 1, por lo que cada vez que los usuarios ingresan un valor de entrada con más de 1 precisión, un campo de entrada redondea automáticamente el valor del número y establece una precisión única.
Aquí, hemos mostrado cómo usar el método number.toFixed(). Además, estableceremos el currencyValue con formato final como un valor del elemento <input>.
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
Por último, llamaremos a la función invokeCurrencyInput() en el elemento <input> dondequiera que se cargue el documento. Aquí accedemos al elemento <input> usando su id.
$(document).ready(function() {
$('input#currencyInput').inovkeCurrencyInput();
});
Código fuente completo- HTML + jQuery:
También hemos agregado jQuery CDN en el siguiente código de ejemplo. Los usuarios deben agregarlo para invocar jQuery con el código HTML.
<html>
<body>
$
<input
type="number"
id="currencyInput"
min="0.1"
max="5000000.0"
value="99.9"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"
integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
$.fn.inovkeCurrencyInput = function () {
$(this).change(function () {
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr("max"));
if (currencyvalue > maxValue) currencyvalue = maxValue;
var minValue = parseFloat($(this).attr("min"));
if (currencyvalue < minValue) currencyvalue = minValue;
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
});
};
$(document).ready(function () {
$("input#currencyInput").inovkeCurrencyInput();
});
</script>
</body>
</html>
El código mostrará inicialmente el valor 99.9 en el campo de entrada. Si el usuario ingresa el valor fuera de 0.1 y 5000000.0, establecerá los valores 0.1 y 5000000.0 en consecuencia; de lo contrario, nuestro código redondeará hacia arriba o hacia abajo el valor a un solo dígito de precisión y lo mostrará en el campo de entrada.
Los usuarios deben presionar la tecla enter para enviar y redondear el valor.
De esta forma, podemos convertir el campo de entrada normal en el campo de entrada de moneda, que tiene límites de mínimo y máximo, y también, los usuarios pueden ingresar valores con una cierta cantidad de dígitos de precisión.
