Tengo un campo de entrada de ingresos en un formulario javascript/jquery:
Tengo un signo de dólar que se muestra a través de css, pero hay problemas para centrarlo y garantizar que el punto de entrada del campo esté al lado sin superponerse. No estoy seguro de cómo hacer las comas. ¡Cualquier sugerencia o consejo es bienvenido!
HTML:
<form id="rev-calculator"> <label for="price">Monthly Revenue</label> <div class="fields"> <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input> <br> </form>CSS:
<style> .body { text-align: left; } .fields { margin: 0 10px 0 0; } .fields:before { content: "$"; text-align: center; position: relative; left:30px; } #price { border-radius: 5px; margin: 15px; padding: 10px; color: black; } </style>JS:
<script> $('#rev-calculator').on('click', 'button', function(e) { e.preventDefault(); var price = $("#price").val(); console.log(price); }) </script>Bueno, aquí hay una manera, aunque en realidad no es tan simple como esperaba cuando comencé por este camino. Puede usar Intl.NumberFormat para obtener la coma allí (según la configuración regional). Para dar cabida a los decimales, los olfateo al principio y los agrego al resultado.
Para permitir la coma, hice de este un campo de texto con un atributo de patrón. Además, ajusté tu CSS para que se vea un poco mejor con el $
$('#price').keydown(function(e) { setTimeout(() => { let parts = $(this).val().split("."); let v = parts[0].replace(/\D/g, ""), dec = parts[1] let calc_num = Number((dec !== undefined ? v + "." + dec : v)); // use this for numeric calculations console.log('number for calculations: ', calc_num); let n = new Intl.NumberFormat('en-EN').format(v); n = dec !== undefined ? n + "." + dec : n; $(this).val(n); }) }) .body { text-align: left; } .fields { margin: 0 10px 0 0; } .fields:before { content: "$"; text-align: center; position: relative; left: 35px; } #price { border-radius: 5px; margin: 15px; padding: 10px 10px 10px 20px; color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="rev-calculator"> <label for="price">Monthly Revenue</label> <div class="fields"> <input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" /> <br> </form>Me sorprende que la respuesta única para este problema tenga muchos votos porque tiene un defecto pequeño pero importante: el evento no debe ser keydown, debe ser keyup. Si usa keydown, no leerá las teclas que está presionando en este momento sino la anterior. Por lo tanto, actualice su respuesta.