Focus text field inside the cell when cell is clicked

Question

I want a textarea inside a cell to be focused when I click in the white area of the cell. At the same time it is also possible to filter that the function is only applied to cells with the class: "use-keyboard-input".

Thanks!

 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>

Answer 1

You need to pass a reference object to the function to determine which cell is clicked. So I updated the function to textareaFocus(obj) and passed td by adding (this) as a parameter to the function:

 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>

You can also do that without calling the function through onclick but by binding a listener to td elements:

$(document).ready(function(){
    $(".use-keyboard-input").click(function(){
        $(this).find("textarea").focus();
    })
})

Answer 2

@Ali's answer is correct, you can also do it a bit more abstract way.

 $('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>