Javascript在新标签中输入密钥打开页面

Question

我正在使用搜索框，并且尝试了多个修复程序，所有这些都反映在代码中。当您单击搜索按钮时，搜索栏会工作并将您带到搜索页面，但是如果您按下回车键，它只会将当前页面的刷新版本拉到新选项卡中。有人知道解决这个问题的方法吗？

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body></body>
<div class="body"></div>
        <div class="grad"></div>
        <div class="header">
            <div>Abuse<span>Caboose</span></div>
        </div>
        <br />
        <br />
        <br />
        <br />
        <a href="login.html">Login</a>
        <br />
        <br />
        <a href="Media_Page.html">Media</a>
        <br />
        <br />
        <a href="Bios.html">Our Team List </a>
        <br />
        <br />
        <a href="ContactUs.html">Contact Us! </a>
        <br />
        <br />
        <img src="http://res.cloudinary.com/lmn/image/upload/e_sharpen:150,f_auto,fl_lossy,q_80/v1/gameskinny/5edfe8862832766bd1c9a38e6a9821eb.jpg" alt="I am Support" title="Image" width="400" height="200" />
        <br />
        <br />
        <br />
        <br />
        <div id="tfheader">
        <form target="_blank">
                <div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeypress="return searchit()"></div>
                <br />
    <a id="searchbutton" href="" onclick="searchit()" target="_blank" onkeypress="return searchit()">Search</a>
    </form>
    </div>
<script>
const baseUrl = "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=";
var userurl;
var enterurl;
function urlinput(event){
var text = event.target.value;
text = text.replace(" ", "+");
userurl = text;
var searchButton = document.getElementById('searchbutton').href="baseUrl";
}
  function searchit()
  {
    document.getElementById("searchbutton").href= baseUrl + userurl; 
  }
</script>
</html>

Answer 1

您的文本框位于表单内，当您按回车键时默认提交表单。通过处理 onsubmit 函数来覆盖表单的默认提交行为。如果您在此函数中 return false，表单将不会提交。

<form target="_blank" onsubmit='return handleSubmit();'>
    <div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeypress="return searchit()"></div>
    <br />
    <a id="searchbutton" href="" onclick="searchit()" target="_blank" onkeypress="return searchit()">Search</a>
</form>


<script>
  function handleSubmit() {
    return false;
  }
</script>

Answer 2

这是一个简单的修复。只需删除表单标签，您不需要它，因为您有 java 脚本来处理搜索。这将解决问题。

Answer 3

    <!DOCTYPE html>
    <html>
    <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="Main.css">
    </head>
    <body></body>
    <div class="body"></div>
            <div class="grad"></div>
            <div class="header">
                <div>Abuse<span>Caboose</span></div>
            </div>
            <br />
            <br />
            <br />
            <br />
            <a href="login.html">Login</a>
            <br />
            <br />
            <a href="Media_Page.html">Media</a>
            <br />
            <br />
            <a href="Bios.html">Our Team List </a>
            <br />
            <br />
            <a href="ContactUs.html">Contact Us! </a>
            <br />
            <br />
            <img src="http://res.cloudinary.com/lmn/image/upload/e_sharpen:150,f_auto,fl_lossy,q_80/v1/gameskinny/5edfe8862832766bd1c9a38e6a9821eb.jpg" alt="I am Support" title="Image" width="400" height="200" />
            <br />
            <br />
            <br />
            <br />
            <div id="tfheader">
            <form>
                    <div><input type="text" placeholder="Search Google" onchange="urlinput(event)" onkeydown="newSearchit();"></div>
                    <br />
        <a id="searchbutton" href="" onclick="searchit()" onkeypress="return searchit()">Search</a>
        </form>
        </div>
    <script>
    const baseUrl = "https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=";
    var userurl;
    var enterurl;
    function urlinput(event){
    var text = event.target.value;
    text = text.replace(" ", "+");
    userurl = text;
    var searchButton = document.getElementById('searchbutton').href="baseUrl";
    }
      function searchit()
      { 
        //alert('Inhere');
        document.getElementById("searchbutton").href= baseUrl + userurl; 
      }

        function newSearchit()
      { 
        if(event.keyCode == 13) {
            document.getElementById("searchbutton").click();
        }
      }
    </script>
    </html>

试试这个！！！

Javascript在新标签中输入密钥打开页面

Javascript enter key opening page in a new tab

javascript

html

function

onsubmit

onkeypress