JS onclickとonkeydown in chrome

Question

私はSharepointでHTMLとjavascriptを使用してカスタム検索ボックスを作ろうとしていますが、Chromeで動作させるようです。私はもともと、このようなコードに直接onclickとonkeydownを持っていた

<script type="text/javascript"> 
function GoSearch() 
    { 
     var searchString = document.getElementById('txtSearch').value 
     window.location.href = '/_layouts/15/osssearchresults.aspx?u=<company web>&k=' + searchString; 
    } 

document.addEventListener('DOMContentLoaded', function() { 
    var link = document.getElementById('btnSearch'); 
    link.addEventListener('click', function() { 
     GoSearch(); 
    }); 
}); 

document.addEventListener('DOMContentLoaded', function() { 
    var link = document.getElementById('txtSearch'); 
    link.addEventListener('keydown', function() { 
     if(event.keyCode == 13) document.getElementById('btnSearch').click(); 
    }); 
}); 
</script> 

<table width="100%"> 
    <tr> 
     <td width="100%" align="center"> 
      <input type="text" id="txtSearch" /> 
      <input type="button" id="btnSearch" value="Search" /> 
     </td> 
    </tr> 
</table> 

：私のコードがある

<input type="button" value="hledat" onclick="GoSearch();" id="searchBtn"> 

が、それは仕事をdidntのとグーグルながら、私は、インライン関数とカント契約をクロムこと、発見しましただから私はリスナーを追加する必要があります。だから私はそれらを追加し、何も変わっていない。これはEdgeで動作しますが、Chromeでは単にEnterキーを押しながらページを更新し、編集モードでページを開くことがあります（理由はわかりません）。

何か間違っていますか？私はJSにとって全く新しいので、何かばかしい間違いがあるかどうかは分かりません。

ありがとうございました。

EDIT：アラートを最初のリスナーに追加した後、それがうまくいきます。変更を削除すると機能しなくなります。アラートのコードは次のとおりです。

document.addEventListener('DOMContentLoaded', function() { 
    var link = document.getElementById('btnSearch'); 
    link.addEventListener('click', function() { 
     window.alert("here i am") 
     GoSearch(); 
    }); 
}); 

これはどのように可能ですか？

Answer 1

。しかし、ここでそれを行うよりエレガントな方法です。常にHTMLマークアップをきちんと整えてください。

FIDDLE

幸運作業

<script type="text/javascript"> 
function GoSearch(e){ 
    var query = document.getElementById('txtSearch').value; 
    window.location.href = '/_layouts/15/osssearchresults.aspx?u=https://pentahospitals.sharepoint.com&k=' + query; 
} 

document.addEventListener('DOMContentLoaded', function() { 
     var queryBox = document.getElementById('txtSearch'); 
    queryBox.addEventListener('keyup', function(e){ 
     if(e.which === 13) GoSearch(); 
    }, false); 

     var link = document.getElementById('btnSearch'); 
    link.addEventListener('click',GoSearch, false); 
}); 
</script> 

<table width="100%"> 
    <tr> 
     <td width="100%" align="center"> 
      <input type="text" id="txtSearch"/> 
      <input type="button" id="btnSearch" value="Search"/> 
     </td> 
    </tr> 
</table> 

！

Answer 2

私はそれを解決しました。将来誰かがこれを探している場合は、私の解決策です。関数の後にreturn falseを追加するだけでした。あなたはそれを考え出したうれしい

<script type="text/javascript"> 
function GoSearch() 
    { 
     var searchString = document.getElementById('txtSearch').value 
     window.location.href = '/_layouts/15/osssearchresults.aspx?u=https://pentahospitals.sharepoint.com&k=' + searchString; 
    } 
</script> 

<table width="100%"> 
    <tr> 
     <td width="100%" align="center"> 
      <input type="text" id="txtSearch" onkeydown="if(event.keyCode == 13) {document.getElementById('btnSearch').click(); return false;}" /> 
      <input type="button" id="btnSearch" value="Search" onclick="GoSearch(); return false;"/> 
     </td> 
    </tr> 
</table>