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.