HTML onKeyDown - 事件调用函数和按钮单击

问题描述：

我试图创建一个搜索选项。HTML onKeyDown - 事件调用函数和按钮单击

如果有人使用我的搜索栏，他们可以按下“搜索按钮”或只需按输入键即可启动该功能。

我的问题是，如果他们按输入在文本框中键启动我function和function后，它会调用button click。

我已经使用谷歌，但无法解决它，甚至试图禁用该按钮，而myFunc()被称为。

哪里'myFunc的（）'代码？你问题中最重要的部分 – Jesse

@Jesse它自己与这个问题无关的功能。 –

好的。我的错。我一定读得太快了。 – Jesse

答

看起来像你想在这种情况下停止事件传播。我改变你的代码如下：

<!DOCTYPE html> 
<html> 
<body> 

<form> 
    Search<br> 
    <input type="text" id="searchField" onKeyDown="if(event.keyCode==13){console.log('Hello World from Input'); return false;}"> 
    <br> 
    <button type="button" id="myButton" onClick="console.log('Hello World from Button')">Search</button> 
</form> 
</body> 
</html>

按下ENTER同时输入元素具有焦点给我只能Hello World from Input在控制台。

答

我觉得这是你在问什么：https://jsfiddle.net/7vf9pz8u/1/

HTML

<form>Search 
    <br> 
    <input type="text" id="searchField" onKeyDown="pressEnter()"> 
    <br> 
    <button type="button" id="myButton" onClick="myFunc()">Search</button> 
</form>

的JavaScript

function pressEnter() { 
    if (event.keyCode == 13) { 
     alert("working"); 
    } 
}

就是这样，即使我使用两个函数来处理它也会被调用。正如我使用谷歌，我看到一篇文章，说如果他们在文本字段中使用keyDown，它还单击形式 – Arman21

答

我想你应该避免提交表单的event.preventDefault（）中的onkeydown功能。

答

我已经在Chrome和Firefox浏览器中测试过你的代码，它的工作完美如你所愿，我在代码中进行了一些更新，以表明它实际上工作正常。如下：

<!DOCTYPE html> 
<html> 
<body> 
<script> 
function myFunc(){ 
    alert("Typed text.: "+document.getElementById("searchField").value) 
} 
</script> 
<form> 
    Search<br> 
    <input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()"> 
    <br> 
    <button type="button" id="myButton" onClick="myFunc()">Search</button> 
</form> 
</body> 
</html>

答

单独处理的onKeyDown在function（onEnter），并使用event.preventDefault();块的默认操作。

请参阅下面的代码。

window.onEnter = function() { 
 
    if (event.keyCode == 13) { 
 
     event.preventDefault(); 
 
     return false; 
 
    } 
 
}

<form> 
 
    Search<br> 
 
    <input type="text" id="searchField" onKeyDown="onEnter()"> 
 
    <br> 
 
    <button type="button" id="myButton" onClick="myFunc()">Search</button> 
 
</form>

http://jsfiddle.net/kishoresahas/cvyzLdy8/

形式的第一个按钮，它应该像工作perfeclty奇怪。我甚至没有在myFunc（） – Arman21

中得到警报，但在我的例子中，我已经定义了'onEnter'函数。你的意思是？ –

HTML onKeyDown - 事件调用函数和按钮单击

相关推荐