JS onclick und onkeydown in chrome

Question

Ich versuche, eine benutzerdefinierte Suchfeld in Sharepoint mit HTML und Javascript zu machen und ich kann nicht scheinen, dass es in Chrome funktioniert. Mein Code ist:

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

ich ursprünglich die onclick und onkeydown direkt im Code wie folgt hatte:

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

aber es hat nicht funktioniert, und ich fand, während googeln, die Überhöhung Deal mit Inline-Funktionen Chrom, also sollte ich Zuhörer hinzufügen. Also fügte ich sie hinzu und nichts änderte sich. Es funktioniert in Edge, aber in Chrome aktualisiert es manchmal die Seite und öffnet manchmal die Seite im Bearbeitungsmodus (habe keine Ahnung warum) und drückt die Eingabetaste (scheint OK zu funktionieren, während der Knopf manuell gedrückt wird, nur Problem drückt Enter).

Mache ich etwas falsch? Ich bin komplett neu in JS, also habe ich keine Ahnung, ob da ein dummer Fehler ist.

Danke für jede Hilfe.

EDIT: Nach dem Hinzufügen von Alarm in den ersten Listener, es funktioniert gut, wenn ich das Altert lösche, funktioniert es nicht mehr. Der Code mit der Warnung lautet:

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

Wie ist das überhaupt möglich?

Answer 1

Froh, dass Sie es herausgefunden haben. Aber hier ist es viel eleganter. Versuchen Sie immer, Ihren HTML-Markup sauber und ordentlich zu halten.

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

Arbeiten FIDDLE

Viel Glück!

Answer 2

Ich löste es. Falls jemand in Zukunft danach suchen sollte, hier ist meine Lösung. Alles was es brauchte, war die Rückgabe von false nach Funktionen.

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