当我在输入字段中键入 URL 时，<form action="https://www.google.com/search" method="GET"> 必须重定向到该网站

Question

我的网页中有一个简单的搜索输入框，其中有 google 搜索操作 it.This 是代码。

<div className="search-container">
        <form action="https://www.google.com/search" method="GET">
          <input type="search" id="search" name="q" placeholder="Search Google or type URL" />
          <button className="icon" type="submit"><i className="small material-icons">search</i></button>
        </form>
      </div>

This is the image of search box

因此，如果我键入任何内容，例如 apple，它会搜索 google apple 并显示内容。但是，如果我键入 url，例如 http://facebook.com，它会再次搜索 google 并显示 facebook 的搜索结果。

但是当我输入 url 时，我需要它重定向到那个特定的网站。如果我输入 http://facebook.com 并按回车键，它必须将我重定向到 facebook 网站，而不是 facebook 的 google 搜索结果页面。

请帮我解决这个问题。提前致谢。

Answer 1

实际上，您在这里想要的是一个按钮可以做两件不同的事情（通过 google 搜索，或重定向到 URL）。因为您希望一个元素做两件不同的事情，所以我建议使用 Javascript 以便页面可以决定做什么。

以下代码将从输入框中获取一个字符串，如果它以 "HTTP://" 开头则重定向，如果不是则搜索 google：

<html>
    <head>
        <script>
            function search(query){
                if(query.slice(0, 7) == "http://"){
                    window.location.href = query
                }
                else{
                    window.location.href = "https://www.google.com/search?q=" + query
                }
            }
        </script>
    </head>
    <body>
        <label for="url">Enter a URL or search query</label>
        <input type="text" name="search" id="search">
        <button type="submit" onclick="search(document.getElementById('search').value)">search</button>
    </body>
</html>

Answer 2

可以添加JS判断输入值是否为URL.

function go() {
  const val = document.getElementById('input').value
  window.open(
    (isURL(val) ? '' :
      'https://google.com/search?q=') + val,
    '_blank')
}

function isURL(url) {
  try {
    new URL(url)
    return true
  } catch (e) {
    return false
  }
}

<input type="text" id="input" placeholder="Search Google or type URL" />
<button onclick="go()">Search</button>

当我在输入字段中键入 URL 时，<form action="https://www.google.com/search" method="GET"> 必须重定向到该网站

<form action="https://www.google.com/search" method="GET"> has to redirect to the website when I type a URL in the input field

forms

google-search