跨浏览器处理“输入”使用javascript按键 [英] Cross-browser handling the "Enter" key pressing using javascript
问题描述
<！DOCTYPE html>
< html>
< head>
< title> keyCode示例< / title>
< script src =http://code.jquery.com/jquery-latest.min.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃search-input）。keyup（function（event）{
event =事件|| window.event;
if（event.keyCode == 13 || event.which == 13）{
$（＃search-button）。click（）;
）
}）;
$（＃search-button）点击（function（）{
var theUrl =http://www.yahoo.com /
window.location = theUrl;
}）;
}）;
< / script>
< / head>
< body>
< input id =search-inputname =searchtype =text/>
< button id =search-buttontype =buttonalt =搜索>搜索< / button>
< / body>
< / html>
这在每个流行的浏览器中都适用于我。
问题是这个代码在Firefox以外的任何浏览器的生产环境中都不起作用。
在我的生产环境中，脚本也内置在$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $％调试模式显示，当我在文本字段中输入字母或数字时，脚本正常运行。当我按Enter键，程序甚至不会进入 $（＃search-input）。keyup（function（event）{ section）文本从文本字段中消失，似乎页面重新加载$ b $ b我再重复一次，问题只能在生产站点上复制，在单独的本地页面上，我上面显示，一切正常。 p>
有谁知道是什么问题？
更新：所有的键都在处理通常，除了Enter，当我按Enter键， $（＃search-input）。keyup（function（event）{不运行，就像没有事件发生一样。
使用以下代码解决问题，请按Enter键：
$（$ click $，$（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ =+ $（'＃search-input'）。val（）;
window.location = theUrl;
}）;
$（'＃search-input' KEYUP ，函数（E）{
如果（e.which == 13）
$（ ＃搜索键）触发器（点击）;
}）;
此代码内置于 $（document）.ready 函数。
I have got the following sample, that easily detects the "Enter" key pressing and handles it correctly. Here it is:
<!DOCTYPE html>
<html>
<head>
<title>keyCode example</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#search-input").keyup(function (event) {
event = event || window.event;
if (event.keyCode == 13 || event.which == 13) {
$("#search-button").click();
}
});
$("#search-button").click(function () {
var theUrl = "http://www.yahoo.com/"
window.location = theUrl;
});
});
</script>
</head>
<body>
<input id="search-input" name="search" type="text"/>
<button id="search-button" type="button" alt="Search">Search</button>
</body>
</html>
This really works for me in every popular browser.
The problem is this code does not work on my production environment in any browser except Firefox.
On my production environment the script is also built in into the $(document).ready function and located in separate "main.js" file. The debug mode showed, that when I enter letters or numbers in the text field the script is running correctly. When I press the "Enter" key, the program does not even go into $("#search-input").keyup(function (event){ section. But the text disappears from the text field, it seems that page reloads.
I repeat one more time, that the problem can be reproduced only on production site. On separate local page, that I showed above, everything works fine.
Does anyone know what is the problem?
Update: All the keys are handling normally, except Enter. When I press Enter, $("#search-input").keyup(function (event){ doesn't run, like no events happened.
The problem is solved using the following code for handling pressing the "Enter" key:
$("#search-button").on('click', function () {
var theUrl = "/search.aspx?search=" + $('#search-input').val();
window.location = theUrl;
});
$('#search-input').on('keyup', function (e) {
if (e.which == 13)
$("#search-button").trigger('click');
});
This code is built into the $(document).ready function.
这篇关于跨浏览器处理“输入”使用javascript按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
