JavaScript 清除文本框

要清空文本输入框，请将它的 value 属性设为空字符串（""）。这会移除当前值，但不会隐藏占位文字；占位文字由单独的 placeholder 属性控制。下面的示例展示了可复用的 JavaScript 函数、内联点击处理程序，以及只移除已知默认值的焦点处理程序。

使用 JavaScript 函数清空文本框

将清空操作放在函数中，便于从按钮或其他交互中调用。在浏览器页面中，可以按 ID 选取输入框，然后为 value 赋值：

本节中的代码以及显示的标签或输出仍为英文。

<input type="text" id="myTextbox" value="Type something here...">
<button type="button" onclick="clearTextbox()">Clear textbox</button>
<script>
  function clearTextbox() {
    document.getElementById("myTextbox").value = "";
  }
</script>

输入框的初始值包含文字。点击按钮会调用 clearTextbox，将 "" 赋给 value 后，这些文字便会被清除，而输入框仍留在页面上。type="button" 属性可防止此控件提交所在的表单。

运行此示例：

const fields = { myTextbox: { value: "Type something here..." } };
const document = {
  getElementById(id) {
    return fields[id] ?? null;
  }
};

function clearTextbox() {
  document.getElementById("myTextbox").value = "";
}

clearTextbox();
console.log(fields.myTextbox.value === "" ? "Textbox cleared." : "Text remains.");

Textbox cleared.

这个可执行的 JavaScript 示例提供了一个简单替代实现，模拟浏览器的元素查找，让赋值操作可以独立运行。在页面中，真正的 document.getElementById 会返回输入框元素。请确保 ID 唯一；如果元素可能不存在，或脚本运行时标记尚未载入，请先检查查找结果，再读取或修改其属性。

使用内联事件处理程序清空文本框

如果控件只需使用一次，也可以把相同的赋值操作直接写在按钮的 onclick 属性中。这样行为紧邻控件；不过，随着功能增加，使用命名函数会更便于复用和维护。

本节中的代码以及显示的标签或输出仍为英文。

<input type="text" id="myTextbox" value="Type something here...">
<button type="button" onclick="document.getElementById('myTextbox').value = '';">Clear textbox</button>

点击按钮时，处理程序会找到输入框，并将空字符串赋给它的值。这个静态 HTML 示例展示的是浏览器标记，不是运行时输出列表。对于较大的页面，可以改为从 JavaScript 添加事件监听器，而不是把行为写在标记中，这样更容易分别管理呈现方式和行为。

聚焦时清空文本框，但保留用户输入

无条件的焦点处理程序会清除字段中的所有内容，包括用户输入的文字。如果字段一开始将说明文字存为它的值，请先与该默认值精确比较，再决定是否清除。占位文字则不同：浏览器会显示占位文字，但它不会成为输入框的值，因此聚焦时无需移除所谓的占位值。

下面这个完整的浏览器示例将脚本放在输入框之后，按 name 选取该字段，并添加一个在字段获得焦点时运行的处理程序：

本节中的代码以及显示的标签或输出仍为英文。

<input type="text" id="name" value="Enter your name">
<script>
  const nameField = document.getElementById("name");
  const defaultName = "Enter your name";

  nameField.addEventListener("focus", () => {
    if (nameField.value === defaultName) {
      nameField.value = "";
    }
  });
</script>

由于脚本位于输入框之后，选取元素时它已经存在。处理程序只会清除与默认值完全相同的内容；如果字段包含其他值，包括用户输入的文字，就会保持不变。如果提示文字只是占位文字，请使用 placeholder 属性，并省略这个清除处理程序。

处理多个输入框和表单提交

若要一次清空多个字段，可以选取具有共同类名的元素，并将空字符串赋给每个输入框。请使用只标识需要重置字段的类名；如果有些值需要保留，就不要选取页面上的所有输入框。

例如，document.querySelectorAll(".clearable-textbox").forEach((field) => { field.value = ""; }); 会将空值赋给每个匹配的输入框。

提交表单时，不要在普通的 submit 处理程序中清空字段。该处理程序会在浏览器构造表单数据之前运行，因此此时赋空字符串可能导致浏览器提交空值。如果使用会阻止正常页面跳转的异步提交，请等请求成功后再清空字段；若请求失败，则保留原值，方便用户重试或修正。使用浏览器正常提交表单时，应保留字段内容，直到浏览器完成提交。

选择合适的方法并避免常见错误

如果多个位置都需要执行同一操作，或希望为操作取一个清晰的名称，请使用独立函数。内联处理程序适合简短示例，但将 JavaScript 混入标记中，可能会让较大的页面更难修改。只有在确实需要移除已知默认值时，才使用带条件检查的焦点处理程序；它不应不加区分地清除用户输入。

如果标记是有条件生成的，或代码可能在页面创建元素之前运行，请先确认元素存在，再访问它的 value。查找结果若为 null，就没有 value 属性；直接读取会导致错误。适当时，可以用 defer 加载页面脚本，或将脚本放在相关标记之后；如果元素不一定存在，仍应保留 null 检查。

最后，当用户数据需要保留时，应让清除操作易于理解，并尽可能避免无法撤销的意外清除。为按钮提供清晰的标签，避免在聚焦时意外清空内容，并考虑表单在验证或提交后是否应保留已输入的文字。无论采用哪种模式，核心操作都相同：选取目标输入框，并将它的 value 设为 ""。