实现点击指定类单元格空白区域时自动聚焦内部textarea功能

没问题，我来帮你搞定这个需求！你想要实现点击带use-keyboard-input类的单元格空白区域时，让里面的textarea自动获焦，对吧？我先帮你修正原代码里的小问题，再优化逻辑确保精准触发。

核心优化点 #

• 修复了HTML里的语法错误（部分td标签的属性引号未闭合，会导致渲染异常）
• 调整了JavaScript的事件绑定逻辑，避免this指向混乱
• 明确了功能的作用范围，只对带有use-keyboard-input类的单元格生效

修正后的完整代码 #

HTML 结构

<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" class="use-keyboard-input">
        <textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea>
      </td>
      <td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td>
      <td colspan="3" class="use-keyboard-input">
        <textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea>
      </td>
      <td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td>
      <td colspan="4" class="use-keyboard-input">
        <textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea>
      </td>
    </tr>
  </tbody>
</table>

JavaScript 逻辑（推荐用事件绑定，更整洁）

$(document).ready(function() {
  // 给所有带use-keyboard-input类的单元格绑定点击事件
  $('.routeTable td.use-keyboard-input').click(function() {
    // 找到当前单元格内的textarea并设置焦点
    $(this).find('textarea').focus();
    console.log('Textarea focused successfully!');
  });
});

保留的CSS 样式

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; 
}

额外说明 #

如果坚持要用内联onclick的方式，也可以把JavaScript改成这样：

function textareaFocus(element) {
  if ($(element).hasClass('use-keyboard-input')) {
    $(element).find('textarea').focus();
    console.log('Textarea focused!');
  }
}

然后在HTML的目标td上添加onclick="textareaFocus(this)"属性即可。

内容的提问来源于stack exchange，提问作者Patrick Gottberg