如何在 JavaScript 中获取搜索输入框的文本值并用于跳转搜索-html教程-PHP中文网

本文介绍如何正确获取 HTML 搜索输入框（）的当前文本内容，并将其赋值给变量，进而构建 Google 搜索链接实现一键跳转。重点解决因遗漏 .value 属性导致返回 undefined 的常见错误。

本文介绍如何正确获取 html 搜索输入框（``）的当前文本内容，并将其赋值给变量，进而构建 google 搜索链接实现一键跳转。重点解决因遗漏 `.value` 属性导致返回 `undefined` 的常见错误。

在 Web 开发中，经常需要读取用户在搜索框中输入的内容并执行后续操作（如发起搜索、提交表单或跳转外部搜索引擎）。假设你有如下 HTML 结构：

<input id="bar" type="search" placeholder="请输入搜索关键词"><button id="searchBtn">搜索</button>

✅ 正确获取输入值的方法

使用原生 JavaScript 时，document.getElementById("bar") 返回的是 DOM 元素对象本身，不是它的值。必须显式访问其 value 属性才能获取用户输入的字符串：

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

⚠️ 错误写法（会导致 query 为元素对象，而非字符串）：

const query = document.getElementById("bar"); // ❌ 返回 <input> 元素，非文本
console.log(query); // 输出类似: <input id="bar" type="search">
console.log(query === undefined); // false，但 typeof query 是 "object"

✅ 正确写法（获取实际输入的文本）：

const query = document.getElementById("bar").value.trim(); // 推荐加 trim() 去除首尾空格
if (!query) {
  alert("请输入搜索关键词！");
  return;
}

? 构建并打开 Google 搜索链接

获取到 query 后，推荐使用 模板字符串（Template Literals） 构造 URL，语义清晰且自动处理编码更安全（注意：仍需手动编码中文等特殊字符）：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

// ✅ 推荐：使用 encodeURIComponent 对查询参数编码
const encodedQuery = encodeURIComponent(query);
window.open(`https://www.google.com/search?q=${encodedQuery}`, "_blank");

? 说明：encodeURIComponent() 是关键——它将空格转为 %20、中文转为 UTF-8 编码格式（如你好 → %E4%BD%A0%E5%A5%BD），避免 URL 解析失败或乱码。

❌ 不推荐直接拼接（易出错）：

window.open("https://www.google.com/search?q=" + query, "_blank"); // ❌ 空格/中文会导致链接中断

? 完整可运行示例

<input id="bar" type="search" placeholder="搜索 Google..."><button id="searchBtn">? 搜索</button>

<script>
  document.getElementById("searchBtn").addEventListener("click", () => {
    const input = document.getElementById("bar");
    const query = input.value.trim();

    if (!query) {
      alert("搜索内容不能为空！");
      return;
    }

    const url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
    window.open(url, "_blank");
  });

  // 支持回车键触发搜索
  document.getElementById("bar").addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      document.getElementById("searchBtn").click();
    }
  });
</script>