2017-01-27 4 views
0

검색 상자를 사용할 때 코드에 반영되는 수정 사항을 여러 번 시도했습니다. 검색 버튼을 클릭하면 검색 창이 작동하고 검색 페이지로 이동합니다. 그러나 Enter 키를 누르면 새로 고침 된 버전의 현재 페이지가 새 탭으로 가져옵니다. 아무도이 문제를 해결할 방법을 알고 있습니까?자바 탭에서 새 탭의 키 시작 페이지를 입력하십시오.

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

[스택 오버플로에 대한 [최소, 완전하고 검증 가능한 예제를 만드는 방법 (http://stackoverflow.com/help/mcve)]을 읽어보십시오. – Steeve

답변

1

텍스트 상자는 양식 안에 있으며 입력 할 때 기본적으로 양식을 제출합니다. 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> 
+0

나는 event.preventDefault()를 사용하려고 시도했다. 그것은 여전히 ​​동일하게 행동했습니다. 나는 또한 시도했다 event.stopPropagation(); –

+0

귀하의 사례는 제가 생각한 것과 약간 다릅니다. 폼의 onsubmit 함수를 재정의하십시오. 내 업데이트 답변을 참조하십시오. –

+0

그러나 나는 당신의 수정 프로그램을 구현하려했지만 여전히 같은 것을 활성화하려고합니다. 그것은 심지어 onsubmit 명령을 사용하지 않는 것처럼 보입니다. –

0

간단한 수정입니다. 양식 태그를 제거하면 검색을 처리 할 Java 스크립트가있는 것처럼 필요하지 않습니다. 이렇게하면 문제가 해결됩니다.

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

관련 문제