1

Quisiera que al momento de seleccionar un input, el focus quede fijo y no pueda moverme a ningún otro campo o elemento hasta que dicho input tenga 10 dígitos.

Mi codigo HTML es el siguiente, sólo estoy practicando para que aparezcan mensajes de alerta. Pero me gustaría que no puedas clicquear en otra parte hasta que tengas 10 dígitos en el input.

    <div class="derecha">
    <h4>DATOS DE CONTACTO</h4>
        <!--input Correo-->
        Calle:
        <input type="text" id="calle" name="calle" class="form-control" placeholder="Ingrese una calle">
    
        <!--input Contraseña-->
        Colonia:
        <input type="text" id="colonia" name="colonia" class="form-control"  placeholder="Ingrese una colonia">
    
        <!--input Confirmar Contraseña-->
        C.P.:
        <input type="text" id="cp" name="cp" class="form-control"  placeholder="Ingrese un C.P." onkeypress="return soloCP(event);" maxlength="5">
        <a id='resulCP'></a>
    
        <!--Input Ciudad-->
        Ciudad:
        <input type="text" id="ciudad" name="ciudad" class="form-control"  placeholder="Ingrese una ciudad">
    
        <!--Input Estado-->        
        Estado:
        <input type="text" id="estado" name="estado" class="form-control"  placeholder="Ingrese un estado">

        <!--input pais-->
        País:
        <input type="text" id="pais" name="pais" class="form-control"  placeholder="Ingrese un país">
    
        <!--input Celular-->
        Celular: +52
        <input type="tel" id="telefono" name="telefono" class="form-control"  placeholder="Ingrese un celular" onkeyup="validarCel(this)" onkeypress="return soloCelular(event);" maxlength="10">
        <a id='resulcel' style="text-decoration: none;"></a> <a id="resulcelV"></a>
    
        <!--input Telefono fijo-->
        Teléfono fijo:
        <input type="tel" id="fijo" name="fijo" class="form-control"  placeholder="Ingrese un teléfono" onkeyup="validartel(this)" onkeypress="return soloNumeros(event);" maxlength="10" required>
        <a id='resultadotel' style="text-decoration: none;"></a> <a id="resultadotelN"></a>
    </form>
</div>      

Y este es mi javascript

validacion de numeros de celular

function soloCelular(evt){
    if(window.event){
        keynum = evt.keyCode;
    }else{
        keynum = evt.which;
    }
    if(keynum>47 && keynum < 58 || keynum == 8 || keynum==13){
        return true;
    }else{
        document.getElementById("resulcelV").innerHTML = "<p id='celVal' style='color: #cc6600; margin-bottom: 0px;'>Solo pueden ingresar números</p>";
        $("#celVal").fadeTo(4000, 500).slideUp(500, function(){
          $("#celVal").slideUp(500);
        });
        return false;
    }
}

mensajes de Advertencias celular

function validarCel(elemento){

    var texto = document.getElementById(elemento.id).value;
    var regex = /^(\d{3}[- ]?){2}\d{4}$/i;
    
    if (!regex.test(texto)) {
        document.getElementById("resulcel").innerHTML = "<p id='celNO' style='color: red; margin-bottom: 0px;'>Número celular no válido</p>";
        return false;
    }else {
      document.getElementById("resulcel").innerHTML = "<p id='celSI' style='color: green; margin-bottom: 0px;'>Número celular válido</p>";
      $("#celSI").fadeTo(3000, 500).slideUp(500, function(){
        $("#celSI").slideUp(500);
      });
      return true;
    }
}

validacion telefono

function validartel(elemento){

    var texto = document.getElementById(elemento.id).value;
    var regex = /^(\d{3}[- ]?){2}\d{4}$/i;
    
    if (!regex.test(texto)) {
        document.getElementById("resultadotel").innerHTML = "<p id='telNO' style='color: red; margin-bottom: 0px;'>Número telefónico no válido</p>";
    }else {
        document.getElementById("resultadotel").innerHTML = "<p id='telSI' style='color: green; margin-bottom: 0px;'>Número telefónico válido</p>";
        $("#telSI").fadeTo(3000, 500).slideUp(500, function(){
          $("#telSI").slideUp(500);
        });
    }
}

mensajes de advertencia de telefono

function soloNumeros(evt){
  if(window.event){
      keynum = evt.keyCode;
  }else{
      keynum = evt.which;
  }
  if(keynum>47 && keynum < 58 || keynum == 8 || keynum==13){
      return true;
  }else{
      document.getElementById("resultadotelN").innerHTML = "<p id='num' style='color: #cc6600; margin-bottom: 0px;'>Solo pueden ingresar números</p>";
      $("#num").fadeTo(4000, 500).slideUp(500, function(){
        $("#num").slideUp(500);
      });
      return false;
  }
}

De antemano gracias.

3
  • Qué tienes hasta el momento? Qué has intentado? y en qué has fallado?. Agrega más información a la pregunta incluyendo un bloque de código para tratar de reproducir el ambiente deseado.
    – DjCrazy
    el 12 abr. a las 20:50
  • listo, gracias por la retro alimentacion. el 12 abr. a las 21:10
  • 4
    No encontraste nada, porque bloquear un input de esa forma no tiene sentido... O sea... no puedo clickear en otro tab?? no puedo clickear en otra app??? tu pagina va a tratar de bloquearme??? entiendo lo que queres hacer, pero por algo las validaciones no impiden que sigas, si no que te avisan... imagina que no tengo ese dato a mano... pero tengo todo el resto, y en 30 segundos me pasan ese dato... tengo que esperar para llenar los otros campos??? dicho esto, podrias ponerle algo al evento lost_focus de ese input... pero como te digo, no es una buena idea....
    – gbianchi
    el 12 abr. a las 21:13

1 respuesta 1

1

Editado


El código anterior funcionaba parcialmente, por lo que se sugieren dos nuevas soluciones

solución 1

Se establece un valor booleano el cual funcionará para determinar si un eventListener debe ejecutarse.

Ventajas:

  • Cubre los eventos cancelable de interés para evitar que se desencadenen acciones mientras esté incompleto el input y después de que este haya recibido focus
  • Funciona para click y tabulador
  • Se puede limitar a cierta sección, en este caso al formulario que lo contiene

Desventajas:

  • Por cada elemento del contenedor y por cada evento de interés se debe agregar el listener para evitar su disparo.

let cellphone = document.querySelector("#telefono");
let stop_until_complete = false;
let everything_else = document.querySelectorAll("form>:not(#telefono)");

let prevent_this = ["click", "keydown", "select", "change", "submit", "focus"];


cellphone.addEventListener("focusin", (e) => {
  stop_until_complete = cellphone.value.length !== 10;
});

cellphone.addEventListener("change", (e) => {
  stop_until_complete = cellphone.value.length !== 10;
});

everything_else.forEach(element => {
  prevent_this.forEach(p => {
    element.addEventListener(p, (e) => {
      if (stop_until_complete) {
        e.preventDefault();
        e.stopImmediatePropagation();
        cellphone.focus();
      }
    });
  })
})

cellphone.focus();
<div class="derecha">
  <form>
    <h4>DATOS DE CONTACTO</h4>
    <label for="telefono"> Celular: +52 </label>
    <input type="text" id="telefono" name="telefono" class="form-control" placeholder="Ingrese un celular" maxlength="10">
    <br>
    <label for="calle"> Calle: </label>
    <input type="text" id="calle" name="calle" class="form-control" placeholder="Ingrese una calle" maxlength="255">
  </form>
</div>

solución 2

Esta propuesta usa un timeout para retornar el focus al input.

Ventajas:

  • Simple de hacer
  • Sólo requiere añadir un eventListener

Desventajas:

  • Si hay un elemento que dispare una función, este método no funcionará correctamente

Notas:

  • Para corregir el punto anterior, se puede programar que no se pueda desencadenar ese evento si el input teléfono no está completo.
  • Se decide aplicar esta solución ya que los eventos blur y focusout no son cancelables

let cellphone = document.querySelector("#telefono");

cellphone.addEventListener("blur", (e) => {
  //console.log(e.cancelable);
  if (cellphone.value.length !== 10) {
    setTimeout(()=> {
      cellphone.focus();
    },
    1);
    console.log("A dónde vas");
  }
});

cellphone.focus();
<div class="derecha">
  <form>
    <h4>DATOS DE CONTACTO</h4>
    <label for="telefono"> Celular: +52 </label>
    <input type="text" id="telefono" name="telefono" class="form-control" placeholder="Ingrese un celular" maxlength="10">
    <br>
    <label for="calle"> Calle: </label>
    <input type="text" id="calle" name="calle" class="form-control" placeholder="Ingrese una calle" maxlength="255">
  </form>
</div>

Tu Respuesta

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

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