JS onclick and onkeydown in chrome

Question

Я пытаюсь создать собственное окно поиска в Sharepoint с помощью HTML и javascript, и я не могу заставить его работать в Chrome. Мой код:

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

я первоначально имел onclick и onkeydown непосредственно в коде, как это:

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

но не работал, и я нашел, а прибегая к помощи, что хром косяка сделки с встроенными функциями, поэтому я должен добавить слушателей. Поэтому я добавил их, и ничего не изменилось. Он работает в Edge, но в Chrome он иногда обновляет страницу и иногда открывает страницу в режиме редактирования (не знаю, почему), нажимая Enter (кажется, что работает ОК, когда вы нажимаете кнопку вручную, только проблема нажимает enter).

Я что-то не так? Я совершенно не знаком с JS, поэтому я понятия не имею, если есть какая-то глупая ошибка.

Спасибо за любую помощь.

EDIT: после добавления предупреждения в первый прослушиватель, он отлично работает, если я удалю altert, он перестает работать. Код с предупреждением:

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

Как это возможно?

Answer 1

Рад, что вы это поняли. Но здесь гораздо более элегантный способ сделать это. Всегда старайтесь держать свою разметку HTML аккуратной и аккуратной.

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

Работа FIDDLE

Удачи!

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>