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>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();
})
})
@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>