jQuery hotkeys plugin to submit a form not working when in an input
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 s开发者_运维知识库omething for the browser like Ctrl-s the save dialog is shown. Any idea how I can stop this from happening?
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.
To disable not only control-s but others, I found this:
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;
}
Taken from here: http://www.arraystudio.com/as-workshop/disable-ctrl-n-and-other-ctrl-key-combinations-in-javascript.html
You can modify it to suit your needs. Although I don't know what "keyBinding" is, here's how I would plug it into your code:
<!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>
加载中,请稍侯......
精彩评论