1

Tengo un div el cual deshabilito mediante css, ese div contiene un input el cual a traves del mouse no se puede acceder pero con tab si permite hacer foco en el. Probé colocando un tabIndex="-1" en el input pero no funciono, sigue permitiendo acceder a el mediante la tecla tab.

Como puedo evitar que se haga foco en el sin tener que hacer un disabled al input?

<div class="d-flex" [ngClass]="{'disabled': isDisabled}">
                        <div class="width-percent-30 label">
                            <label>Número</label>
                        </div>
                        <div>
                            <input  [inputFormControl]="form.get('number')">
                        </div>
</div>

1 respuesta 1

0

Puedes usar la propiedad pointer-events: none (no recibe eventos de puntero)

input {
    pointer-events: none;
}

Y adicionalmente agregar onfocus="this.blur()" para quitar el foco apenas lo reciba, debido a uso de tab u otra manera de enfocar.

En el ejemplo se asigna la clase css .noclick

.noclick {
    pointer-events: none;
}
<div class="d-flex" [ngClass]="{'disabled': isDisabled}">
                        <div class="width-percent-30 label">
                            <label>Número</label>
                        </div>
                        <div>
                            <input onfocus="this.blur()" class="noclick" [inputFormControl]="form.get('number')">
                        </div>
</div>

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.