Javascript ввод ключевой страницы открытия в новой вкладке

Я работаю с окном поиска и испробовал несколько исправлений, все из которых отражены в коде. Когда вы нажимаете кнопку поиска, панель поиска работает и переводит вас на страницу поиска, однако, если вы нажимаете клавишу ввода, она просто перетаскивает обновленную версию текущей страницы на новую вкладку. Кто-нибудь знает способ исправить это?

<!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>

javascript function html onsubmit onkeypress
person zac95    schedule 27.01.2017    source источник
comment
Прочтите Как создать минимальный, полный и проверяемый пример в Stack Overflow.   -  person Steeve    schedule 27.01.2017

Ответы (3)


arrow_upward
1
arrow_downward

Ваше текстовое поле находится внутри формы и по умолчанию отправляет форму, когда вы нажимаете Enter. Переопределите поведение отправки формы по умолчанию, обработав функцию onsubmit. Если вы вернете 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>
person Matt Spinks    schedule 27.01.2017
comment
я пытался использовать event.preventDefault(); он все еще вел себя так же. Я также пробовал event.stopPropagation(); - person zac95; 27.01.2017
comment
Ваш случай немного отличается от того, что я думал. Переопределить функцию onsubmit формы. Смотрите мой обновленный ответ. - person Matt Spinks; 27.01.2017
comment
Я пытался реализовать ваше исправление, однако оно по-прежнему активируется так же, как и раньше. Кажется, что он даже не использует команду onsubmit - person zac95; 27.01.2017
comment
неважно, ваше исправление сработало, я забыл скобки () в конце имени функции. однако теперь он полностью отменяет отправку формы даже с помощью кнопки. - person zac95; 27.01.2017

arrow_upward
0
arrow_downward

Это просто исправить. Просто удалите тег формы, он вам не нужен, так как у вас есть java-скрипт для обработки поиска. Это решит проблему.

person Thanga    schedule 27.01.2017

arrow_upward
0
arrow_downward 

    <!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>

Попробуйте это!!!

person Srikar Kairamkonda    schedule 27.01.2017