如何使用JS实现具备键盘退格键功能的按钮？

你的代码核心问题是操作<input>元素内容时用错了方法——<input>的内容需要用val()方法读写，而不是text()。另外，修改输入框内容后，需要手动触发keyup事件，才能让表格过滤逻辑同步执行。

修复后的按钮点击事件代码：

$("#back").click(function() {
  const input = $("#myInput");
  // 获取当前输入框值，截取去掉最后一个字符
  input.val((i, val) => val.slice(0, -1));
  // 手动触发keyup事件，让表格过滤逻辑生效
  input.trigger("keyup");
});

完整的修复后代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,td {border: 1px solid black;border-collapse: collapse;}
</style>
</head>
<body>
<input id="myInput" type="search" placeholder="Filter Criteria..">
<button id="back">backspace button</button>
<table>
<tbody id="myTable">
<tr><td>sedan</td><td>suv</td><td>hatchback</td></tr>
<tr><td>fighterjet</td><td>biplane</td><td>helicopter</td></tr>
</tbody>
</table>
</body>
<script>
$("#back").click(function() {
  const input = $("#myInput");
  input.val((i, val) => val.slice(0, -1));
  input.trigger("keyup");
});
</script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</html>

关键说明： #

• val()是操作表单元素（如input、select）内容的正确方法，text()通常用于普通HTML元素（如div、p）的文本内容读写。
• 调用trigger("keyup")是为了让输入框内容变化后，表格的过滤逻辑自动执行，和手动按退格键的行为完全一致。

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