Javascript 如何在按下文本输入输入键时调用函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26747177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call function on text input enter key pressed?
提问by MadsterMaddness
I have created a div in a table format that I am using to filter data options. I am having problems with pressing enter from inside the text box. When I press enter, the alert appears, but the page just reloads and isn't properly filtered with any of the options. Can anyone explain to me what is going on?
我以表格格式创建了一个 div，用于过滤数据选项。我在从文本框中按 Enter 时遇到问题。当我按 Enter 时，会出现警报，但页面只是重新加载，并且没有使用任何选项进行正确过滤。谁能向我解释发生了什么？
Please let me know if I was unclear or need to explain anything!
如果我不清楚或需要解释什么，请告诉我！
This is what my filter option bar looks like:
这是我的过滤器选项栏的样子：
HTML:
HTML：
<form name="myform">
<center><table id="mykeyTable" border="1" cellspacing="10" cellpadding="10">
<center></center>
</td>
<!--Search bar -->
<tr>
<td colspan="4">
<center>
<form>
Starts With: <input type="text" id="myText" value=""><br>
</form>
</center>
</tr>
<!-- Site Options -->
<td><center>Site</center><br>
<input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Asc"checked>
<input type ='button' id='siteIDChosen' class='button-addAsc'/>
<br>
<input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Desc" >
<input type ='button' id='siteIDChosen' class='button-addDesc'/>
<br>
</input>
</form></td>
<!-- Status options -->
<td><center>Status
<br><br></center><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)"value="Online"> Online<br><input type="radio" name="siteStatus" onclick="up\
dateSiteStatus(this.value)" value="Offline"> Offline<br><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)" value="Both" checked> Both </form></td\
>
<!-- usage plan -->
<td><center>Usage Plan (in MB)</center>
<br><input type="radio" name="usagePlan" onclick="updateUsagePlan(this.value)" value="yesUsagePlan"> Data Plan<br><input type="radio" name="usagePlan" onclick="updateUsage\
Plan(this.value)" value="noUsagePlan"> No Data Plan<br><input type="radio" name ="usagePlan" onclick="updateUsagePlan(this.value)" value="bothUsagePlan" checked> All Plans\
</form></td>
</table>
<br>
<form><input type='button' id='filter' name='Submit' onclick='validate()' class='button-add' value=" Filter Selections"/></form>
</center>
</form>
</div>
Javascript:
Javascript：
<script>
$("#myText").keypress(function(event) {
if (event.which == 13) {
alert("You pressed enter");
validate();
}
});
$(document).keypress(function(event){
if(event.keyCode == 13){
validate();
}
});
function validate() {
//...
}
</script>
SOLVED:
解决了：
I used jQuery click to call the same function used as the button.
我使用 jQuery click 调用与按钮相同的函数。
$(document).keypress(function(event){
if(event.keyCode == 13){
$('#filter').click();
// validate(); doesn't need to be called from here
}
});
采纳答案by EricBellDesigns
I would suspect you are getting an error in your validate() function. Try putting the alert after you call the validate() and see if you still receive the alert message. Like this...
我怀疑您在 validate() 函数中遇到错误。尝试在调用 validate() 后发出警报，看看是否仍然收到警报消息。像这样...
$("#myText").keypress(function(event) {
if (event.which == 13) {
validate();
alert("You pressed enter");
}
});
回答by biko
It looks like the issue as described in your question 'How to call function on text input enter key pressed?' is not an issue since you have the proper events set up to listen to the Enter key. What you need to do is to fix your validate function to update the UI. Try to move the alert to the first line of the validate function and go from there to figure out where your code is breaking.
看起来像您的问题“如何在按下文本输入输入键时调用函数？”中描述的问题。不是问题，因为您已经设置了适当的事件来收听 Enter 键。您需要做的是修复验证功能以更新 UI。尝试将警报移动到验证函数的第一行，然后从那里找出您的代码中断的地方。
Also, it looks like your HTML could be fixed up... tags are old-school deprecated code. You can't have nested tags. And last you aren't closing your tags properly. The issues you are experiencing could be related, especially with the nested tags as the browser would attempt to fix your HTML and who knows which post parameters the form would be sending.
此外，看起来您的 HTML 可以修复...标签是过时的弃用代码。你不能有嵌套标签。最后，您没有正确关闭标签。您遇到的问题可能是相关的，尤其是嵌套标签，因为浏览器会尝试修复您的 HTML 并且谁知道表单将发送哪些 post 参数。
Tip: Use Chrome web inspector's console to see exactly where your code is breaking. View->Developer->Javascript Console
提示：使用 Chrome 网络检查器的控制台准确查看您的代码中断的位置。查看->开发者->Javascript控制台
