如何在 JavaScript 中获取搜索输入框的文本值并赋给变量-html教程-PHP中文网

本文讲解如何正确获取 HTML 搜索输入框（）的当前文本内容，并将其安全赋值给 JavaScript 变量，避免返回 undefined，同时提供可直接运行的示例和最佳实践。

本文讲解如何正确获取 html 搜索输入框（``）的当前文本内容，并将其安全赋值给 javascript 变量，避免返回 `undefined`，同时提供可直接运行的示例和最佳实践。

在使用原生 JavaScript 获取元素的用户输入时，一个常见误区是仅通过 document.getElementById("bar") 获取 DOM 元素对象本身——这返回的是整个元素节点，而非其中的文本内容。因此，若未显式访问其 .value 属性，变量将无法得到用户输入的字符串，而是保留对元素对象的引用；当后续尝试将其用于字符串拼接或 URL 构造时，极易因隐式类型转换导致意外行为（如输出 [object HTMLInputElement] 或 undefined）。

✅ 正确做法是：在获取元素后立即链式访问 .value 属性：

const query = document.getElementById("bar").value;

该语句会实时读取输入框当前的文本值（即用户已输入但尚未提交的内容），并赋给常量 query。注意：此操作应在用户触发事件（如点击按钮、回车键）时执行，而非页面加载时——否则 value 为空字符串。

若需将该值用于跳转 Google 搜索，推荐使用模板字符串提升可读性与安全性（避免手动编码与拼接错误）：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

function performSearch() {
  const input = document.getElementById("bar");
  const query = input.value.trim(); // 建议添加 trim() 去除首尾空格

  if (!query) {
    alert("请输入搜索关键词！");
    return;
  }

  // 使用 encodeURIComponent 确保特殊字符（如空格、中文、符号）被正确编码
  const encodedQuery = encodeURIComponent(query);
  const googleUrl = `https://www.google.com/search?q=${encodedQuery}`;

  window.open(googleUrl, "_blank"); // "_blank" 更标准，替代 "Result"
}

? 关键注意事项：

✅ 务必使用 .value —— 这是获取文本内容的唯一标准属性；
✅ 对用户输入调用 .trim() 防止纯空格提交；
✅ 使用 encodeURIComponent() 对查询参数编码，避免 URL 解析失败（例如搜索 “hello world” 会自动转为 hello%20world）；
❌ 避免直接拼接未编码的 query 到 URL 中，否则含空格、&、? 等字符时将破坏 URL 结构；
⚠️ 若使用 jQuery，等效写法为 $("#bar").val()，但原生方案更轻量、无需依赖库。

最后，在 HTML 中绑定事件（如按钮点击或回车提交），确保逻辑按需触发：

<input id="bar" type="search" placeholder="输入关键词后回车搜索"><button onclick="performSearch()">搜索</button>

<!-- 或监听回车 -->
<script>
  document.getElementById("bar").addEventListener("keypress", (e) => {
    if (e.key === "Enter") performSearch();
  });
</script>

掌握这一基础操作，是构建交互式搜索功能、表单验证及动态请求的前提。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南