Necesito hacer un formulario para registrar productos a una base de datos, queria saber si existe alguna función para que al escribir por ejemplo: 10 Salga asi: $10.00.
3 respuestas
Podrias probar a concatenar un '$' antes del numero introducido, y hacer una comprobación por si el numero no tiene decimales añadirle '.00'
Una función basica:
function moneda($moneda) {
if (strpos($moneda,'.')) {
$str = '$'.$moneda;
} else {
$str = '$'.$moneda.'.00';
}
return $str;
}
Seguramente haya una forma mejor de hacerla pero quizas te sirva.
Si utilizas una versión de PHP mayor a 4.3.0 puedes emplear la función money_format. Esta función toma dos parámetros, el formato y un valor numérico.
Para ponerle el signo $ y dos decimales podrías hacer lo siguiente:
$numero = 125.236;
echo money_format('$%.2n', $numero); // $125.24
"$" sería una cadena arbitraria y "%.2n" sería el valor con 2 decimales.
Otra opción de poner el signo $ sería utilizando la función setlocale:
setlocale(LC_MONETARY, 'en_US.UTF-8');
$numero = 125;
echo money_format('%.2n', $numero); // $125.00
Si quieres formatear un número como moneda no necesitas ninguna extensión. Todos los browsers modernos soportan el objeto intl.NumberFormat.
Si recibes un número 1500000.5
y quieres formatearlo con puntos como separador de miles, coma como separador decimal, y signo euros:
const numero = 1500000,
numero_formateado = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(numero);
document.querySelector('#input_numero').value = numero;
document.querySelector('#input_formateado').value = numero_formateado;
<div style="display:flex;justify-content:space-evenly;">
<label>numero:<br><input type="number" id="input_numero" /></label>
<label>numero formateado:<br><input type="text" id="input_formateado" /></label>
</div>
Si lo que queres es que el comportamiento se mantenga luego de la interacción con el usuario (cosa que no pueda borrar el signo de moneda, por ejemplo) puedes usar por ejemplo AlpineJS con el plugin mask:
<input type="text" x-mask:dynamic="'€ '+$money($input)" placeholder="€ 0.00">
(Ahí puedes anteponer el signo de moneda que prefieras, use euros como ejemplo)
.demo {
border: 1px solid #ccc;
font-size: 1rem;
background: white;
padding: 1rem;
border-width: 1px;
border-radius: .25rem;
border-color: #d8dee9;
}
.demo input {
font-size: 1rem;
padding: 0.15rem;
height: 1.3rem;
}
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<div class="demo" x-data="">
<input type="text" x-mask:dynamic="'€ '+$money($input)" placeholder="€ 0.00">
</div>
Manipular el contenido del input no es algo trivial. Si quieres usar eventos y reescribir lo que haya escrito el usuario, tendrías que detectar además en qué posición fue el último keyup, porque en otro caso lo estarás llevando una y otra vez al inicio o al final del número, y eso es muy molesto.
Por otro lado, me imagino que lo que la persona escriba querrás enviarlo de vuelta al backend, y querrás enviarlo como número, no como texto formateado. Usando el mismo ejemplo de arriba, puedes hacer un data-binding tal que en otro input (que para este ejemplo está visible, pero en tu caso de uso estaría oculto) se vaya reflejando el valor numérico del texto formateado. A la hora de enviar el formulario, es este último el que realmente se toma en cuenta:
.demo {
border: 1px solid #ccc;
font-size: 1rem;
background: white;
padding: 1rem;
border-width: 1px;
border-radius: .25rem;
border-color: #d8dee9;
}
.demo input {
font-size: 1rem;
padding: 0.15rem;
height: 1.3rem;
}
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<div class="demo" x-data="{
valor:'',
get parsed() {
return this.valor.replace(/[^\d,]+/g,'').replace(',','.')
},
set parsed(val) {
}
}">
<input type="text" x-model="valor" x-mask:dynamic="'€ '+$money($input,',','.')" placeholder="€ 0.00">
<input type="number" x-model="parsed">
</div>