jQuery 热键插件提交表单在输入时不起作用
我有一个包含一堆小表格的页面。我想动态分配一个热键来提交每个表单。代码如下所示:
HTML
<form:form id="formCtrlr" action="review.html">
<input name="id" type="hidden" value=""/>
</form:form>
<form:form id="formCtrls" action="save.html">
<input name="id" type="hidden" value=""/>
</form:form>
...很多其他类似的小表单,每个表单都有一个与热键相关的唯一 id...
jQuery
$('[id^="formCtrl"]').each(function() {
var me = $(this);
var myId = me.attr("id");
var keyBinding = myId.replace("form", "").replace(/(.{4})/g,"$1+");
$(document).bind('keydown', keyBinding, function (evt){
evt.stopPropagation();
evt.preventDefault();
$("#"+myId).submit();
return false;
});
});
简单吧?但是页面上还有多个文本输入,如果用户在其中一个字段中键入并按下其中一个热键,则不会提交相应的表单,事实上,如果热键与浏览器的某些内容匹配,例如 Ctrl-s显示保存对话框。知道如何阻止这种情况发生吗?
I've got a page with a bunch of little forms. I want to dynamically assign a hotkey to submit each form. The code looks like:
HTML
<form:form id="formCtrlr" action="review.html">
<input name="id" type="hidden" value=""/>
</form:form>
<form:form id="formCtrls" action="save.html">
<input name="id" type="hidden" value=""/>
</form:form>
...lots of other little forms like this each with a unique id related to the hotkey...
jQuery
$('[id^="formCtrl"]').each(function() {
var me = $(this);
var myId = me.attr("id");
var keyBinding = myId.replace("form", "").replace(/(.{4})/g,"$1+");
$(document).bind('keydown', keyBinding, function (evt){
evt.stopPropagation();
evt.preventDefault();
$("#"+myId).submit();
return false;
});
});
Simple right? But there are also several text inputs on the page and if the user is typing in one of those fields and hits one of the hotkeys, the corresponding form is not submitted and in fact if the hotkey matches something for the browser like Ctrl-s the save dialog is shown. Any idea how I can stop this from happening?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

发布评论
评论(2)
为了不仅禁用 control-s 而且禁用其他控件,我发现了这个:
function disableCtrlModifer(evt)
{
var disabled = {s:0};
var ctrlMod = (window.event)? window.event.ctrlKey : evt.ctrlKey;
var key = (window.event)? window.event.keyCode : evt.which;
key = String.fromCharCode(key).toLowerCase();
return (ctrlMod && (key in disabled))? false : true;
}
您可以修改它以满足您的需要。虽然我不知道“keyBinding”是什么,但我将如何将其插入您的代码中:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Charts/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
function disableCtrlModifer( evt )
{
var disabled = { s:0 }; // You can add more keys here :)
var ctrlMod = ( window.event ) ? window.event.ctrlKey : evt.ctrlKey;
var key = ( window.event ) ? window.event.keyCode : evt.which;
key = String.fromCharCode( key ).toLowerCase();
return ( ctrlMod && (key in disabled) ) ? false : true;
}
$( document ).ready(function()
{
$( "[id^='formCtrl']" ).each(function()
{
var me = $( this );
var myId = me.attr( "id" );
var keyBinding = myId.replace("form", "").replace( /(.{4})/g,"$1+" );
//$(document).bind( "keydown keypress keyup", disableCtrlModifer );
me.find( "input" ).each( function()
{
$( this ).bind( "keydown keypress keyup", keyBinding, disableCtrlKeyCombination );
});
});
});
</script>
</head>
<body>
<form id="formCtrl-123" method="get">
<input type="text" name="test1" value="" />
</form>
</body>
</html>
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我猜测热键事件被输入捕获然后被阻止。尝试将事件直接添加到输入,而不是添加到表单。
I would guess that the hotkey event is being captured by the input and then blocked. Try adding the event to the inputs directly, instead of to the form.