3

Estoy trabajando con Laravel (y su motor de templates Blade). Tengo un input para colocar el precio de un producto:

<input type="text" 
    onkeydown="validateNumber(event)"  
    name="precio" 
    value="{{old('precio')}}" 
    class="form-control" 
    placeholder="Precio del articulo..."
    required>

Quiero que cuando se escriba por ejemplo 350000 sea convertido automaáticamente a 3.500.00

3

1 respuesta 1

4

Lo mejor es que utilices algún plugin de jQuery, como:

Ya tienen contemplados muchos casos, ademas de que ofrecen mascaras según el tipo de dato o el formato que quieras utilizar. Si te encuentras limitado a implementarlo únicamente con javascript esta solución puede servirte:

window.applyMask = function(input){
        console.log('applyMask');
        var unmasked = input.value.replace(/\./g,' ').replace(/ /g, '');
        input.value = addDots(unmasked);
     
  }

window.addDots = function(value){
    x = value.split(',');
    x1 = x[0]; // parte entera
    x2 = x.length > 1 ? ',' + x[1] : ''; // parte decimal
    // 3 digitos precedidos por una cantidad de 1 o mas digitos.
    // aplico regex para obtener 2 grupos cada 3 digitos
    var rgx = /(\d+)(\d{3})/;
    // $1 corresponde a los digitos predecesores, $2 al segundo grupo, los 3 dígitos que indican miles.
    while (rgx.test(x1)) {
     //reemplaza la parte entera concatenando el primer grupo, un punto y el segundo grupo.
      x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    // concatena con parte decimal
    return x1 + x2;
}

inputId = document.getElementById('valueInput');
window.onload = applyMask(inputId)
<input id="valueInput" placeholder= "Insert value here"  onkeyup="applyMask(this);" />

7
  • Sería importante que también funcione al momento de cargar la página, pues lo que hace Laravel es en caso de un error de validación, volver al formulario y mostrar los datos previamente ingresados.
    – Shaz
    Commented el 31 may. 2017 a las 23:08
  • Te refieres a que no este ligada únicamente al onkeyup y que ejecute para todos los inputs que sean "importe" en el onLoad? Commented el 31 may. 2017 a las 23:15
  • Exactamente, así funcionaría perfecto para lo que lo quiere el OP y tendrías mi +1.
    – Shaz
    Commented el 31 may. 2017 a las 23:19
  • Edité el fiddle, espero tu comentario :) Commented el 31 may. 2017 a las 23:27
  • Al parecer funciona, tal vez sería bueno que agregues el resto del código acá también. +1
    – Shaz
    Commented el 31 may. 2017 a las 23:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.