1

quería hacer un input que cambie el tamaño del texto aceptase solo las siguientes normas:

  • Sea un número entre 0/nada - 1000
  • Acepte números decimales pero solo hasta 2 decimales y que se indique con , o ..

Tengo este codigo:

document.querySelector(".in").addEventListener("input", data);
function data(e) {
  e.target.value = e.target.value.replace(/[^0-9\.,]/g, '');
  if (/^,/.test(e.target.value)) {
    e.target.value = e.target.value.replace(/,/g, '');
    p.style.fontSize = e.target.value + "px";
  }
  if (/^\./.test(e.target.value)) {
    e.target.value = e.target.value.replace(/\./g, '');
    p.style.fontSize = e.target.value + "px";
  }
  if (/1000,/.test(e.target.value)) {
    e.target.value = 1000;
    p.style.fontSize = e.target.value + "px";
  }
  if (/1000\./.test(e.target.value)) {
    e.target.value = 1000;
    p.style.fontSize = e.target.value + "px";
  }
  if (/\.{1,}[0-9]{0,},{1,}/.test(e.target.value)) {
    e.target.value = e.target.value.split("").reverse().join("").replace(/,/, '').split("").reverse().join("");
    p.style.fontSize = e.target.value + "px";
  }
  if (/\,{1,}[0-9]{0,}.{1,}/.test(e.target.value)) {
    e.target.value = e.target.value.split("").reverse().join("").replace(/\./, '').split("").reverse().join("");
    p.style.fontSize = e.target.value + "px";
  }
  if (parseFloat(e.target.value) < 1000) {
    if (e.target.value.includes(',')) {
      if (/,{1}[0-9]{0,},/.test(e.target.value)) {
        e.target.value = e.target.value.split("").reverse().join("").replace(/,/, '').split("").reverse().join("");
        p.style.fontSize = e.target.value + "px";
      }
      if (/,[0-9]{3,}/.test(e.target.value)) {
        e.target.value = e.target.value.replace(/[0-9]$/, '');
        p.style.fontSize = e.target.value + "px";
      }
    }
    if (e.target.value.includes('.')) {
      if (/\.{1}[0-9]{0,}\./.test(e.target.value)) {
        e.target.value = e.target.value.split("").reverse().join("").replace(/\./, '').split("").reverse().join("");
        p.style.fontSize = e.target.value + "px";
      }
      if (/\.[0-9]{3,}/.test(e.target.value)) {
        e.target.value = e.target.value.replace(/[0-9]$/, '');
        p.style.fontSize = e.target.value + "px";
      }
    }
    p.style.fontSize = Number(e.target.value) + "px";
  }
  if (parseFloat(e.target.value) > 1000) {
    e.target.value = 1000;
    p.style.fontSize = e.target.value + "px";
  }
  if (parseFloat(e.target.value) == "") {
    e.target.value = parseFloat(getComputedStyle(p).fontSize);
  }
  if (parseFloat(e.target.value) < 0) {
    e.target.value = 1;
    p.style.fontSize = e.target.value + "px";
  }
  p.style.marginTop = parseFloat(getComputedStyle(p).marginTop) - 0.01 + "px";
}
<input class="in"/>
<p id="p">Texto</p>

Me parece muy largo ya que usa muchos if y se vuelve lento, me gustaría saber si hay otra forma de hacerlo o sino como puedo hacer el código más corto.

3 respuestas 3

3

1.- Usas las validaciones de HTML5

  • max="1000"
  • min="0"
  • step="0.01"

2.- Llamas a la validaciones cada vez que el input cambia usando el evento oninput

3.- Ejecutas la validación usando la función checkValidity()

4.- Vas guardando el valor del campo cada vez que la validación es correcta. La puedes guardar dentro de un atributo data- del mismo input. De esta manera, cuando la validación falla retrotraes el valor al último valor que ha aprobado.

function validate(){
  if(event.target.checkValidity()){
    event.target.setAttribute("data-oldvalue", event.target.value);
  }
  else{
    event.target.value = event.target.getAttribute("data-oldvalue") || "";
  }
}
<input type="number" min="0" max="1000" step="0.01" oninput="validate()">

El único problema es que acepta valores mas de 2 decimales cuando desde el tercer decimal en adelante son ceros, por ejemplo 33,2200000. Pero te lo dejo para que lo soluciones.

2

Con una expresión regular seria suficiente no hay necesidad de hacer demasiados if para esto así:

document.querySelector(".in").addEventListener("keypress", e => {
    if(!/^(?:\d{1,3}(?:\,\d{1,2})?(?:\,)?|\s*)$/.test(e.target.value + e.key)) e.preventDefault();
})
1
1

Una versión más segura y optimizada, podrías hacer lo siguiente:

Evitar números menor a 0 y mayor a 1000:

Aparte de colocar min y max, podemos validar que si el valor del input es menor a 0 o mayor a 1000, hacemos un slice desde el primer caracter hasta el penúltimo caracter, removiendo el último y así obteniendo sólo los números correspondientes (que sería de 1 a 1000):

function data(input) {
  if (input.value < 0 || input.value > 1000) {
    input.value = input.value.slice(0, input.value.length - 1);
  }
}
<input class="in" type="number" min="0" max="1000" oninput="data(this)" style="width: 100px;"/>

Evitar números negativos:

Sin embargo, hasta aquí nos permite ingresar el -, y al colocar el siguiente número, recién ocurre el slice. Entonces podemos evitarlo haciendo una pequeña validación, donde indico que si presiono la tecla -, evitamos el evento por defecto del keydown, es decir, no recibirá el valor de la tecla pulsada:

function data(input) {
  if (input.value < 0 || input.value > 1000) {
    input.value = input.value.slice(0, input.value.length - 1);
  }
}
<input class="in" type="number" min="0" max="1000" oninput="data(this)"
       onkeydown="if (event.key === '-') event.preventDefault();" style="width: 100px;"/>

Evitar el onpaste y onDrop:

Incluso podemos volver más seguro el input evitando el pegado y el arrastre, devolviendo false cuando ocurren estos eventos:

function data(input) {
  if (input.value < 0 || input.value > 1000) {
    input.value = input.value.slice(0, input.value.length - 1);
  }
}
<input class="in" type="number" min="0" max="1000" oninput="data(this)"
       onkeydown="if (event.key === '-') event.preventDefault();"
       onpaste="return false;" onDrop="return false;" style="width: 100px;"/>

2 decimales como máximo:

Y respecto a los decimales, si por ejemplo, colocamos el 999 y seguido un decimal, podemos poner infinitos números, tipo 999.9999999999. Para evitarlo, podemos verificar que si el valor del input incluye un ., separamos el valor usando al . como separador, obteniendo un array, en donde el primer elemento será el número antes del . y el segundo elemento será el número después del .. Entonces trabajemos con el segundo elemento, que sería arr[1], y validamos que si su longitud de ese número es mayor a 2, hacemos un slice para obtener los dos primeros caracteres, removiendo el tercer caracter y así obteniendo siempre 2 números como decimales. Y luego juntamos los elementos del array con join(), que devuelve una cadena y asignamos ese valor al input:

function data(input) {
  if (input.value < 0 || input.value > 1000) {
    input.value = input.value.slice(0, input.value.length - 1);
  }

  if (input.value.includes('.')) {
    let arr = input.value.split('.');
    if (arr[1].length > 2) {
      arr[1] = arr[1].slice(0, 2);
      input.value = arr.join('.');
    }
  }
}
<input class="in" type="number" min="0" max="1000" oninput="data(this)"
       onkeydown="if (event.key === '-') event.preventDefault();"
       onpaste="return false;" onDrop="return false;" style="width: 100px;"/>


Código final:

function data(input) {
  if (input.value < 0 || input.value > 1000) {
    input.value = input.value.slice(0, input.value.length - 1);
  }

  if (input.value.includes('.')) {
    let arr = input.value.split('.');
    if (arr[1].length > 2) {
      arr[1] = arr[1].slice(0, 2);
      input.value = arr.join('.');
    }
  }

  let p = document.querySelector("#p");
  p.style.fontSize = input.value + "px";
  p.style.marginTop = parseFloat(getComputedStyle(p).marginTop) - 0.01 + "px";
}
<input class="in" type="number" min="0" max="1000" oninput="data(this)"
       onkeydown="if (event.key === '-') event.preventDefault();"
       onpaste="return false;" onDrop="return false;" style="width: 100px;"/>

<p id="p">Texto</p>

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.