Question

我正在尝试使用HTML和javascript在Sharepoint中创建自定义搜索框，我似乎无法在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">

但它没有用，我发现谷歌搜索时，Chrome无法处理内联函数，所以我应该添加监听器。所以我添加了它们，没有任何改变。它适用于Edge，但在Chrome中它有时会刷新页面，有时在按下Enter键的同时打开页面（不知道为什么）（在手动点击按钮时似乎工作正常，只有按下输入才会出现问题）。< / p>

我做错了吗？我是JS的新手，所以我不知道，如果有一些愚蠢的错误。

感谢您的帮助。

编辑：在第一个监听器中添加警报后，它运行良好，如果我删除了替换，它就会停止工作。带警报的代码是：

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

这怎么可能？

Answer 1

我解决了。如果将来有人搜索这个，这是我的解决方案。所需要的只是在函数之后添加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>

Answer 2

很高兴你明白了。但这里有更优雅的方式。始终尽量保持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

祝你好运！

JS onclick和onkeydown in chrome

2 个答案: