1

En este ejemplo cuando pulsas en un textarea se te abre otro más grande para escribir más cómodamente y luego cuando pierde el foco pasa todo la info a al textarea original.

El problema es que quiero que cuando el textarea grade pierda el foco, ya sea porque he pinchado fuera o porque he pulsado tabulación, el foco lo gane el siguiente textarea.

var componente;
$(".text").focus(function() {
  console.log('ll');
  $("#padre").css("filter", "blur(4px)");
  $("#wraperTextArea").show();
  $("#textOver").focus();
  var texto = $(this).val();
  componente = $(this);
  $("#labelOver").html($(this).data('label'));
  $("#textOver").attr('tabindex', $(this).attr('tabindex') + 1);
  $("#textOver").val(texto);
});
$("#textOver").blur(function() {
  $("#padre").css("filter", "blur(0)");
  $("#wraperTextArea").hide();
  var texto = $(this).val();
  componente.val(texto);
});
* {
  border: 0;
  margin: 0;
}

#padre {
  display: flex;
  background-color: #5ecab3;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#padre>* {
  background: #feb2a8;
  padding: 2rem;
  margin: 1rem;
}

label {
  margin: 0.5rem;
  display: block;
}

#wraperTextArea {
  height: 80vh;
  width: 80vw;
  position: fixed;
  top: 0;
  left: 0;
  border: solid;
  padding: 10vh 10vw;
  background: rgba(0, 0, 255, 0.2);
  display: none;
}

textarea#textOver {
  height: calc(90% - 5rem);
  width: 90%;
  padding: 5%;
}

#labelOver {
  height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='padre'>
  <div>
    <label for="text">Nombre</label>
    <textarea data-label="nombre" name="text" class="text" cols="30" rows="10"></textarea>
  </div>
  <div>
    <label for="text">Apellidos</label>
    <textarea data-label="Apellidos" name="text" class="text" cols="30" rows="10"></textarea>
  </div>
  <div>
    <label for="text">Edad</label>
    <textarea data-label="Edad" name="text" class="text" cols="30" rows="10"></textarea>
  </div>
</div>
<div id='wraperTextArea'>
  <label id="labelOver" for="text">aqui el texto</label>
  <textarea name="text" id="textOver" cols="30" rows="10"></textarea>
</div>

¿Como modifico el valor global de tabindex?

Toda la información que encuentro habla del valor del atributo tabindex de los elementos, pero no del valor global.

1 respuesta 1

1

En respuesta a:

[...]o ¿Cómo hacer que el foco vaya al siguiente elemento?

Para que al presionar Tab vaya al siguiente elemento, solo tienes que:

  • A los textarea "chicos" agregarles un tabindex diferente y en orden ascendente. Esto le indicará al navegador cual es el elemento al que se le debe dar foco a continuación del elemento actual.

  • Al mostrar y darle foco al textarea "grande", le asignamos el mismo tabindex que tiene el elemento que disparó el evento.

Para que al presionar Shift+Tab se le de foco al elemento anterior, podemos:

  • Suscribirnos al evento keydown del textarea "grande", detectar que dichas teclas están siendo presionadas, buscar el elemento con tabindex menor al del elemento y darle foco.

Ejemplo:

var componente;
$(".text").focus(function() {
  $("#padre").css("filter", "blur(4px)");
  $("#wraperTextArea").show();
  $("#textOver").focus();
  componente = $(this);
  $("#labelOver").html($(this).data('label'));
  $("#textOver").attr('tabindex', $(this).attr('tabindex'));
  $("#textOver").val($(this).val());
});
$("#textOver").blur(function() {
  $("#padre").css("filter", "blur(0)");
  $("#wraperTextArea").hide();
  componente.val($(this).val());
});
$("#textOver").on('keydown', function(evt) {
  if (evt.shiftKey && evt.key == 'Tab') {
    $('.text[tabindex="'+($(this).prop('tabindex') - 1)+'"]').focus();
  }
});
* {
  border: 0;
  margin: 0;
}
#padre {
  display: flex;
  background-color: #5ecab3;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#padre>* {
  background: #feb2a8;
  padding: 2rem;
  margin: 1rem;
}
label {
  margin: 0.5rem;
  display: block;
}
#wraperTextArea {
  height: 80vh;
  width: 80vw;
  position: fixed;
  top: 0;
  left: 0;
  border: solid;
  padding: 10vh 10vw;
  background: rgba(0, 0, 255, 0.2);
  display: none;
}
textarea#textOver {
  height: calc(90% - 5rem);
  width: 90%;
  padding: 5%;
}
#labelOver {
  height: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='padre'>
  <div>
    <label for="text">Nombre</label>
    <textarea data-label="Nombre" name="text" class="text" cols="30" rows="10" tabindex="1"></textarea>
  </div>
  <div>
    <label for="text">Apellidos</label>
    <textarea data-label="Apellidos" name="text" class="text" cols="30" rows="10" tabindex="2"></textarea>
  </div>
  <div>
    <label for="text">Edad</label>
    <textarea data-label="Edad" name="text" class="text" cols="30" rows="10" tabindex="3"></textarea>
  </div>
</div>
<div id='wraperTextArea'>
  <label id="labelOver" for="text">aqui el texto</label>
  <textarea name="text" id="textOver" cols="30" rows="10"></textarea>
</div>

2
  • Pues ya lo había intentado y no me había salido... algo escribí mal.
    – E.rick
    el 12 oct. 2019 a las 19:18
  • 1
    @E.rick, he actualizado mi respuesta, para dar una solución un poco mas completa.
    – Marcos
    el 12 oct. 2019 a las 19:26

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.