在输入文本元素中按下“输入”时停止页面刷新答案

【问题标题】：Stop page refreshing when 'enter' is pressed in input text element在输入文本元素中按下“输入”时停止页面刷新
【发布时间】：2012-05-22 22:11:03
【问题描述】：

有没有办法在输入文本元素中按下回车按钮时阻止网页完全刷新？

我正在寻找创建一个搜索字段，当按下 Enter 时我可以从中获取文本以过滤对象并仅显示包含搜索字段中文本的对象。

我尝试了以下方法来尝试捕捉回车按钮，但它不起作用。

function setupSearchField() {
    document.getElementById("searchField").onKeyDown = function(event) {
        var holder;
        if (window.event) {
            holder = window.event.keyCode;
        } else {
            holder = event.which;
        }
        keyPressed(holder);
    }
}

function keyPressed(key) {
    if (key == 13) {
        event.cancelBubble = true;
        return false;
    }
}

【问题讨论】：

你在keyPressed() 中说event.cancelBubble = true，但keyPressed() 中没有event——那是在onKeyDown 回调中！

标签： javascript

【解决方案1】：

如果输入元素在表单中，并且该表单实际上并未提交到服务器，请移除该表单。

您的代码不起作用的原因是因为 onkeydown 事件应该是小写的，而您实际上并没有在其中返回某些内容（尝试 return keyPressed(holder); - 或者只是将 keyPressed 函数的代码移动到 @ 987654324@，因为将它作为一个单独的函数对我来说似乎毫无意义）。

【讨论】：

【解决方案2】：

当只有一个文本输入时会发生这种情况，无论您的按钮（如果有）是否有 type="submit" 。它记录在这里。 http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 因此，正如之前其他人所建议的那样，您必须简单地停止这种默认行为。

【讨论】：

【解决方案3】：

您的搜索字段是否在元素内？然后点击“enter”会触发表单元素的提交事件。

在这种情况下，您可以通过在表单元素上定义 onsubmit 来处理您的过滤。

<form id="searchForm">
    <input type="text" name="search" />
</form>
<script>
    document.getElementById('searchForm').onsubmit = function() {
        var searchValue = this.search.value;
        // process
        return false;
    }
</script>

可能是这样的。

【讨论】：

【解决方案4】：

只需将以下 javascript 代码添加到您的 Visualforce 页面：

<script type='text/javascript'>
function stopRKey(evt) 
{
   var evt=(evt) ? evt : ((event) ? event : null);
   var node=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);
   if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}

document.onkeypress = stopRKey;
</script>

【讨论】：