技术咨询：读取输入框搜索词并追加至链接后在新标签页打开

刚好可以通过监听链接的点击事件，自定义跳转逻辑来实现你的需求，不用提交表单就能完成搜索词的追加和新标签跳转。下面是调整后的完整实现方案，还优化了原代码里的小细节：

完整代码示例 #

HTML结构

<input type="text" name="search_term" id="searchInput" placeholder="输入搜索词">
<a class="mylink" href="http://example.com/search">前往搜索</a>

JavaScript逻辑

// 获取目标链接
const searchLink = document.querySelector("a.mylink");

// 为链接添加点击事件监听
searchLink.addEventListener("click", function(e) {
    // 阻止链接的默认跳转行为
    e.preventDefault();
    
    // 获取输入框中的搜索词（用ID选择更稳定，避免DOM结构变动导致失效）
    const searchQuery = document.getElementById("searchInput").value.trim();
    
    // 可选：判断搜索词是否为空，为空则提示用户
    if (!searchQuery) {
        alert("请先输入搜索词哦");
        return;
    }
    
    // 拼接带有搜索词的新URL，这里用encodeURIComponent处理特殊字符更规范
    const targetUrl = `${this.href}?q=${encodeURIComponent(searchQuery)}`;
    
    // 在新标签页打开拼接好的链接
    window.open(targetUrl, "_blank");
}, false);

关键细节说明 #

• e.preventDefault()：这一步很重要，它会阻止浏览器默认的链接跳转行为，让我们能自定义跳转逻辑
• encodeURIComponent(searchQuery)：用来处理搜索词里的特殊字符（比如空格、&、=等），避免URL出现解析错误
• 如果页面中有多个.mylink链接，可以用document.querySelectorAll("a.mylink")遍历所有链接，逐个添加事件监听：

  document.querySelectorAll("a.mylink").forEach(link => {
      link.addEventListener("click", function(e) {
          // 复用上面的逻辑即可
      });
  });
  

• 如果你坚持依赖DOM结构获取输入框（比如输入框是链接的前一个元素），可以把document.getElementById("searchInput").value换成this.previousElementSibling.value，但这种方式不如ID选择器稳定，一旦DOM结构调整就会失效

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