单击单元格时将文本字段置于单元格内

Question

当我单击单元格的白色区域时，我希望单元格内的文本区域能够聚焦。 同时也可以过滤 function 只应用于 class: "use-keyboard-input" 的单元格。

谢谢！

 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

您需要将引用 object 传递给 function 以确定单击了哪个单元格。 所以我将 function 更新为textareaFocus(obj)并通过将(this)作为参数添加到 function 来传递 td：

 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>

您也可以在不调用 function 到 onclick 的情况下执行此操作，而是通过将侦听器绑定到td元素：

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

Answer 2

@Ali 的回答是正确的，你也可以用更抽象的方式来做。

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