1

Tengo el siguiente fragmento de código:

 <div class="input-group mb-3">
     <span class="input-group-text" id="basic-addon1">
         <img class="image-input-info" src="https://img.icons8.com/color/480/000000/phone-not- 
         being-used.png" alt="Icono comentario crédito"/>
     </span>
     <input type="number" id="comentario_telefono" class="form-control" 
     name="comentario_telefono" onkeyup="copiar()"/>
 </div>

Como podrán ver tiene BOOTSTRAP, pero al momento de poner una función para limitar el length del input con id "comentario-telefono", BOOTSTRAP inhabilita toda la función que se quiera hacer, ya hice una prueba sin BOOTSTRAP y si funciona con el siguiente código:

<input type="number" id="telefono" />


document.getElementById("comentario_telefono").addEventListener("keyup", limitaTelefono);

function limitaTelefono() {
    var campo = document.getElementById("comentario_telefono");
    if (campo.value.length == 10) {
        campo.style.backgroundColor = "#E9ECEF";
        campo.disabled = true;
        campo.style.color = "#000";
    } else{

    }
}

No sé si me explique ¿?

6
  • Modifica el orden en que cargas tu scripts, pone el tuyo al final o agregale defer. Commented el 9 jul. 2021 a las 20:34
  • ¿Cómo "DEFER" Facundo?
    – Minor
    Commented el 9 jul. 2021 a las 20:36
  • en la etiqueta script, agregas defer de esta forma <script defer src="arhivo.js"></script> Commented el 9 jul. 2021 a las 20:37
  • No funciono con DEFER ¿Alguna otra manera? Ya revise y solo pasa con input=number con textarea sigue todo correcto por ejemplo
    – Minor
    Commented el 9 jul. 2021 a las 20:43
  • Intenta colocando event.preventDefault(); en tu función limitaTelefono(), por cierto, debes añadir event en tu función, así limitaTelefono(event) Commented el 9 jul. 2021 a las 20:58

1 respuesta 1

0

Tanto tu función, como el evento keyup los estás vinculando a un elemento con id telefono que en tu HTML no existe. Si te fijas el <input> de ejemplo tiene el id comentario_telefono. Además, ese <input> llama a una función llamada copiar() en su keyup. No puedes tener dos funciones asociadas al mismo evento.

document.getElementById("telefono").addEventListener("keyup", limitaTelefono);

function limitaTelefono() {
    var campo = document.getElementById("telefono");
    if (campo.value.length == 10) {
        campo.style.backgroundColor = "#E9ECEF";
        campo.disabled = true;
        campo.style.color = "#000";
    } else{

    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="input-group mb-3">
     <span class="input-group-text" id="basic-addon1">
         <img class="image-input-info" src="https://img.icons8.com/color/480/000000/phone-not- 
         being-used.png" alt="Icono comentario crédito"/>
     </span>
     <input type="number" id="telefono" class="form-control" 
     name="telefono" />
 </div>

Si cambias el id en tu HTML al que corresponde y le quitas el evento keyup te debería funcionar sin problemas.

7
  • Ah perdón, se me olvido modificar eso, tenia otro input con id "telefono" de prueba, igual buena explicación phpMyguel
    – Minor
    Commented el 9 jul. 2021 a las 20:47
  • En mi ejemplo ejecutable he cargado Bootstrap para que veas que ese no es el problema. ¿Lo que muestras en tu pregunta es lo que tienes en tu proyecto?
    – phpMyGuel
    Commented el 9 jul. 2021 a las 20:51
  • Sí, de hecho acabo de pasar los links de bootstrap a mi proyecto pero aún así no surte efecto
    – Minor
    Commented el 9 jul. 2021 a las 20:54
  • Pues el problema son esas dos cosas que te he dicho. en tu elemento <input type="number" id="comentario_telefono" class="form-control" name="comentario_telefono" onkeyup="copiar()"/ tienes una función keyup ya. No puedes tener las dos. (copiar() y limitaTelefono())
    – phpMyGuel
    Commented el 9 jul. 2021 a las 20:57
  • Quite la copiar(); pero no funciona tampoco
    – Minor
    Commented el 9 jul. 2021 a las 21:04

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.