admin管理员组文章数量:1356768
I'm trying to create a search option.
If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.
My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.
I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.
<!DOCTYPE html>
<html>
<body>
<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>
I'm trying to create a search option.
If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.
My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.
I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.
<!DOCTYPE html>
<html>
<body>
<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>
-
Where is the
myFunc()code? The most important part of your question – Jesse Commented Oct 28, 2015 at 16:11 - 1 @Jesse the function its self has nothing to do with the question. – Adam Buchanan Smith Commented Oct 28, 2015 at 16:23
- Alright. My mistake. I must have read it too fast. – Jesse Commented Oct 28, 2015 at 16:24
5 Answers
Reset to default 1Looks like you want to stop the event propagation in this case. I've changed your code to the following:
<!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>
Pressing enter while the input element has the focus gives me only Hello World from Input at the console.
I think this is what you are asking for: https://jsfiddle/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");
}
}
Handle the onKeyDown separately in a function (onEnter) and use event.preventDefault(); block the default action.
See the below code.
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/kishoresahas/cvyzLdy8/
I think you should prevent form submitting by event.preventDefault() in onkeydown function.
I have tested your code in chrome and firefox browser and it is working perfectly as you wish, I make some update in your code to show that it is actually working fine. Follows:
<!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>
本文标签： javascriptHTML onKeyDownEvent calling function and buttonclickStack Overflow
版权声明：本文标题：javascript - HTML onKeyDown-Event calling function and button-click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743965468a2569806.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论