点击提交按钮后输入框无法重置的技术问题求助

我来帮你搞定这个问题！从你的代码来看，主要有两个潜在问题导致输入框没法正常清空：

1. 代码执行顺序逻辑错误 #

你现在是先清空输入框，再调用getInput()获取输入值——这不仅会让callAPI()拿到空值（完全不符合搜索的逻辑），也可能因为后续API调用的异步操作干扰清空效果。正确的顺序应该是：先拿到输入值，再清空输入框，最后调用API。

2. 按钮默认行为未阻止 #

如果按钮没明确指定type="button"，浏览器会默认把它识别为type="submit"。哪怕没有包裹在<form>标签里，部分浏览器也会触发页面刷新行为——刚执行的清空操作会被页面刷新覆盖，输入框自然又回到原来的状态。

修正后的完整代码 #

HTML部分（给按钮添加明确的type属性）：

<div class="searchcontainer">
  <input type="text" id="query" placeholder="Search for a recipe">
  <button id="submit" name="button" type="button">Search</button>
</div>

jQuery部分（调整执行顺序，确保逻辑合理）：

$("#submit").click(function() {
  // 先获取输入值
  const searchValue = getInput();
  // 再清空输入框
  $('#query').val('');
  // 最后调用API
  callAPI(searchValue);
});

额外优化建议 #

如果你的getInput()只是简单获取输入框的值，可以直接写在代码里，还能加个非空判断避免无效搜索：

$("#submit").click(function() {
  const searchValue = $('#query').val().trim();
  if (searchValue) {
    $('#query').val('');
    callAPI(searchValue);
  }
});

这样调整后，点击提交按钮时输入框会立刻清空并显示placeholder，同时API也能拿到正确的搜索值，页面也不会因为默认提交行为乱刷新啦！

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