0

Tengo un select2 múltiple, que cuando se selecciona un elemento específico de él, digamos "OTROS", habilita un input text, de modo que ahí se ingrese información adicional. Esto funciona en forma correcta.

Cuando se da clic al botón de Enviar, se realiza la validación de que si la opción "OTROS" del select2 esta seleccionada y el input box está vacío (no se ha ingresado información), se muestra un alerta para que el usuario ingrese información en el input text y se asigna el foco al input text.

El problema es que el input text no recibe el foco, por lo que cuando el usuario quiere ingresar la información, primero debe hacer clic sobre el input y luego ingresar la información, lo cual le quita fluidez a la acción.

El código del despliegue del input text es el siguiente

<div class="row container-fluid mt-1 justify-content-start">
    <div class="col-md-6">
        <div class="container-fluid row mt-1">
            <div class="col-12 align-self-start">
                <p>LISTA DISTRIBUCIÓN</p>
            </div>
            <div class="col-12 form-group">
                <textarea id="listadistribucion" class="form-control" name="listadistribucion" rows="3"></textarea>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="ant">PROYECTO</span>
            </div>
            <input id="descproyecto" name="descproyecto" type="text" class="form-control" placeholder="Ingrese Nombre Proyecto" aria-label="ant" aria-describedby="basic-addon1">                                                
        </div>
    </div>
</div>

introducir la descripción de la imagen aquí

Donde hago la validación es:

            }else if((flagDescProyecto==1)&&($("#descproyecto").val().length<1)){
                //console.log($("#descproyecto").val());
                alert("Debes ingresar el nombre del proyecto");
                $('#pills-tab a[href="#fondos"]').tab('show');
                //$('#actividad').tab('show');
                $("#descproyecto").focus();
            }

La validación funciona correctamente, pues ingresa en el "if".

introducir la descripción de la imagen aquí

En los demás elementos que tiene el formulario, el tema del foco funciona bien, pero aquí, no se realmente lo que pase. O estoy cometiendo un error demasiado trivial que no lo veo o tal vez los formatos bootstrap que uso en esta parte específica está haciendo que algo no lo tome.

1
  • Hay muy poco código como para identificar el problema; podrían ser muchas cosas, como instrucciones que tengas después de la comparación u otros eventos que puedan interferir.
    – Triby
    el 2 dic. 2020 a las 16:15

1 respuesta 1

0

Prueba a realizarlo de otra forma:

  1. En lugar de acceder directamente al método focus, prueba a hacerlo sobre el elemento "explícitamente":
$('#descproyecto').get(0).focus();

Para comprobar si jQuery "cree" que tiene el foco, lo puedes hacer con:

$('#descproyecto').is(':focus')
  1. Ponle un setTimeOut para descartar que se trate de que esté ocurriendo algún problema por el número de animaciones/chequeos/etc..en el navegador del cliente.
3
  • Muchas gracias @Israel-ICM por tu aporte. Me permitió conocer alternativas de solución que no conocía. Tal como dije en la pregunta, tal vez era un error tan trivial que no era capaz de darme cuenta. Así fue, el error estaba en mi código: //$('#actividad').tab('show'); el TAB donde está el input es "SOLICITUD" y al que estaba haciendo referencia en el código que pude es "actividad"; además lo tenía comentado . . . en fin, fue un error mío, cansancio, bloqueo, . . . yo creo que entiendes. te agradezco tu tiempo y gentileza en responder mi consulta. el 3 dic. 2020 a las 2:23
  • Muchas gracias @cooper por tu aporte. Me permitió conocer alternativas de solución que no conocía. Tal como dije en la pregunta, tal vez era un error tan trivial que no era capaz de darme cuenta. Así fue, el error estaba en mi código: //$('#actividad').tab('show'); el TAB donde está el input es "SOLICITUD" y al que estaba haciendo referencia en el código que pude es "actividad"; además lo tenía comentado . . . en fin, fue un error mío, cansancio, bloqueo, . . . yo creo que entiendes. te agradezco tu tiempo y gentileza en responder mi consulta. el 3 dic. 2020 a las 2:23
  • Saludos, en realidad quien respondió a tu pregunta es @cooper, en mi caso solo realice la edición correspondiente, si esta respuesta te sirvió seria bueno que le asignes los puntos correspondientes. Suerte ;)
    – Israel-ICM
    el 3 dic. 2020 a las 12:28

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.