left / right arrow keys

1,335 views
Skip to first unread message

ippa

unread,
Feb 7, 2010, 4:13:55 PM2/7/10
to fancybox
I use fancybox to show a form with various input / textareas. I
noticed that I can't use left / right keys to navigate inside a input
field or textarea.

I've tried this in both ff and ie, same error. I haven't investigated
much but I could only assume it's cause they're set to change to next
and prev picture on left / right arrowkeys. up and down arrows works
as expected.

Maybe the arrow keys could be an option? I tried 'showNavArrows' :
'false' but it didn't solve the problem.

Thanks for a great plugin!

wenglock

unread,
Feb 22, 2010, 6:23:44 AM2/22/10
to fancybox
Yep, you're right... because the left and right arrow keys are
captured and prevented from performing their default behaviour...

If you look under the fancybox_set_navigation() function, you'll see
it there (the if clause with keycodes 37 and 39)...


> I use fancybox to show a form with various input / textareas. I
> noticed that I can't use left / right keys to navigate inside a input
> field or textarea.

What you can do is introduce an extra option called
disableNavButtons... I added this to the bottom of the file where the
list of default options are...

$.fn.fancybox.defaults = {
...
disableNavButtons : true,
...
};

And then, in your fancybox_set_navigation function, in those two if
clauses i pointed out above, test if e.keycode is 37 or 39 AND whether
currentOpts.disableNavButtons is false. If so, you rebind the actions
for the left and right arrow buttons.

function fancybox_set_navigation() {
$(document).unbind('keydown.fb').bind('keydown.fb', function(e) {
if (e.keyCode == 27 && currentOpts.enableEscapeButton) {
e.preventDefault();
$.fancybox.close();

} else if (e.keyCode == 37 && !currentOpts.disableNavButtons) {
e.preventDefault();
$.fancybox.prev();

} else if (e.keyCode == 39 && !currentOpts.disableNavButtons) {
e.preventDefault();
$.fancybox.next();
}
...

Reply all
Reply to author
Forward
0 new messages