0

Como podria hacer que cuando presione la tecla tab, no pase sobre el input que esta dentro de su contenedor que es un button. Es decir, al hacer tab, se marca el button pero si presiono tab otra vez, se dirige al input oculto (este input tiene ancho y alto de 0px porque necesitaba estilos especificos para hacer el icono de check), y lo que necesito es que lo ignore y se pase a la siguiente tarjeta...

Ademas cuando el focus esta sobre el boton, que al presionar enter se seleccione la tarjeta como si fuera un click. Incluyo el codigo de lo que tengo hasta el momento.

.container {
  display: flex;
}

.wrapper-card {
  width: 150px;
  height: 200px;
  background: pink;
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  margin: 40px;
}

.wrapper-card:hover {
  border: 2px solid blue;
  box-shadow: 0 10px 21px 1px rgba(0, 0, 0, .1);
}

.wrapper-card:focus {
  border: 2px solid blue;
  box-shadow: 0 10px 21px 1px rgba(0, 0, 0, .1);
  outline: 0;
}

.select-product-area {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

label {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  position: absolute;
  left:0;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

input:checked~.checkmark {
  border-color: blue;
}

input:checked~.checkmark:after {
  display: block;
}

.checkmark {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 1.87px solid #000;
  cursor: pointer;
  z-index: 1;
  display: block;
  position: absolute;
  right: 15px;
  top: 18px;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid blue;
  border-width: 0 1.87px 1.97px 0;
  transform: rotate(45deg);
}
<div class="container">
  <button class="wrapper-card">
    <div class="select-product-area">
      <label class="selected-product" for="tablet-2015">
              <input type="checkbox" id="tablet-2015" name="tablet-2015" data-name-display="tablet-2015" />
              <span class="checkmark"></span>
          </label>
    </div>
  </button>

  <button class="wrapper-card">
    <div class="select-product-area">
      <label class="selected-product" for="desktop-2020">
              <input type="checkbox" id="desktop-2020" name="desktop-2020" data-name-display="desktop-2020" />
              <span class="checkmark"></span>
          </label>
    </div>
  </button>
</div>

1
  • 1
    porque un input dentro de un button?
    – Bryro
    el 12 mar. 2020 a las 14:58

1 respuesta 1

3

El tab se soluciona agregando el atributo tabindex="-1" en el input que no deseas que se seleccione.

Para simular el click al presionar enter, debes agregar jQuery. Además, debes agregar id's en algunos elementos como el botón y el label... el código de jQuery está comentado.

//Cuando el botón wrapperTablet tenga el focus
$('#wrapperTablet').focusin(function(){
  //Detecta el evento keypress
  $('#wrapperTablet').keypress(function(event){
      //Si la tecla presionada es enter (que equivale al código 13)
      if(event.which == 13) {
        //Simula el evento click
        $('#tablet').trigger('click');
      }
  });
});

$('#wrapperDesktop').focusin(function(){
  $('#wrapperDesktop').keypress(function(event){
      if(event.which == 13) {
        $('#desktop').trigger('click');
      }
  });
}); 
.container {
  display: flex;
}

.wrapper-card {
  width: 150px;
  height: 200px;
  background: pink;
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  margin: 40px;
}

.wrapper-card:hover {
  border: 2px solid blue;
  box-shadow: 0 10px 21px 1px rgba(0, 0, 0, .1);
}

.wrapper-card:focus {
  border: 2px solid blue;
  box-shadow: 0 10px 21px 1px rgba(0, 0, 0, .1);
  outline: 0;
}

.select-product-area {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

label {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  position: absolute;
  left:0;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

input:checked~.checkmark {
  border-color: blue;
}

input:checked~.checkmark:after {
  display: block;
}

.checkmark {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 1.87px solid #000;
  cursor: pointer;
  z-index: 1;
  display: block;
  position: absolute;
  right: 15px;
  top: 18px;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid blue;
  border-width: 0 1.87px 1.97px 0;
  transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button class="wrapper-card" id="wrapperTablet">
    <div class="select-product-area">
      <label class="selected-product" for="tablet-2015" id="tablet">
         <input type="checkbox" id="tablet-2015" name="tablet-2015" data-name-display="tablet-2015" tabindex="-1" />
         <span class="checkmark"></span>
      </label>
    </div>
  </button>

  <button class="wrapper-card" id="wrapperDesktop">
    <div class="select-product-area">
      <label class="selected-product" for="desktop-2020" id="desktop">
        <input type="checkbox" id="desktop-2020" name="desktop-2020" data-name-display="desktop-2020" tabindex="-1"/>
        <span class="checkmark"></span>
      </label>
    </div>
  </button>
</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.