Quiero que un área de texto dentro de una celda esté enfocada cuando hago clic en el área blanca de la celda. Al mismo tiempo también es posible filtrar que la función solo se aplique a las celdas con la clase: "use-keyboard-input".
¡Gracias!
function textareaFocus(){ $(this).find('textarea').each(function(){ $(this).focus(); }); console.log('test'); } table{ width: 100% !important; vertical-align: middle; border-spacing:0; border-collapse: collapse; background-color: white; } textarea{ border: none; width: 100%; height: 100%; background-color: transparent; resize: none; outline: none; font-size: 1.8vw; vertical-align: middle; text-align: center; padding: 0; color: var(--fontDark); background-color: red; } .routeTable td{ border: 1px solid black; font-size: 1.8vw; text-align: center; vertical-align: middle; } .routeTable th{ border: 1px solid black; font-size: 1.8vw; text-align: center; } .routeTable tr{ border: 1px solid black; font-size: 1.8vw; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="routeTable"style="border: none;"> <tbody style="border: none;"> <tr style=" height: 10em;"><td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td><td onclick="textareaFocus();" colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td><td onclick="textareaFocus(); colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td><td onclick="textareaFocus(); colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td> </tr> </tbody> </table>Debe pasar un objeto de referencia a la función para determinar en qué celda se hace clic. Así que actualicé la función a textareaFocus(obj) y pasé td agregando (this) como parámetro a la función:
function textareaFocus(obj){ $(obj).find('textarea').focus(); console.log('test'); } table{ width: 100% !important; vertical-align: middle; border-spacing:0; border-collapse: collapse; background-color: white; } textarea{ border: none; width: 100%; height: 100%; background-color: transparent; resize: none; outline: none; font-size: 1.8vw; vertical-align: middle; text-align: center; padding: 0; color: var(--fontDark); background-color: red; } .routeTable td{ border: 1px solid black; font-size: 1.8vw; text-align: center; vertical-align: middle; } .routeTable th{ border: 1px solid black; font-size: 1.8vw; text-align: center; } .routeTable tr{ border: 1px solid black; font-size: 1.8vw; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="routeTable" style="border: none;"> <tbody style="border: none;"> <tr style="height: 10em;"> <td colspan="3" style="background-color: var(--dark); width: 15%;">Cell-1:</td> <td colspan="3" onclick="textareaFocus(this);"> <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td> <td colspan="2" style="background-color: var(--dark); width: 15%">Cell-2</td> <td onclick="textareaFocus(this);" colspan="3"> <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td> <td colspan="3" style="background-color: var(--dark); width: 15%">Cell-3:</td> <td colspan="4" onclick="textareaFocus(this);"> <textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td> </tr> </table> También puede hacerlo sin llamar a la función a través de onclick pero vinculando un oyente a los elementos td :
$(document).ready(function(){ $(".use-keyboard-input").click(function(){ $(this).find("textarea").focus(); }) })La respuesta de @Ali es correcta, también puedes hacerlo de una manera un poco más abstracta.
$('textarea').on('focus', function() { console.log('textarea focused'); }); $('textarea').parent('td').on('click', function() { console.log('cell clicked'); $(this).find('textarea:first-child').focus(); }) table{ width: 100% !important; vertical-align: middle; border-spacing:0; border-collapse: collapse; background-color: white; } textarea{ border: none; width: 100%; height: 100%; background-color: transparent; resize: none; outline: none; font-size: 1.8vw; vertical-align: middle; text-align: center; padding: 0; color: var(--fontDark); background-color: red; } .routeTable td{ border: 1px solid black; font-size: 1.8vw; text-align: center; vertical-align: middle; } .routeTable th{ border: 1px solid black; font-size: 1.8vw; text-align: center; } .routeTable tr{ border: 1px solid black; font-size: 1.8vw; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="routeTable"style="border: none;"> <tbody style="border: none;"> <tr style=" height: 10em;"> <td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td> <td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td> <td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td> <td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td> <td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td> <td colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td> </tr> </tbody> </table>