jQuery & key handlers

jQuery & key handlers

Hi,

I am a web developer and I use the jQuery. But I face a problem with Opera and key events. While in Firefox do I press shift + A to display a textfield and not write the letter A, the Opera opens the textfield but he writes the letter A.

Here's the code I have written to combine keys Shift + A (not just A, but any other letter):

$.Shift = function(key, callback, args) {
	var isShift = false;
	$(document).keydown(function(e) {
		if(!args) args=[]; // IE barks when args is null

		if(e.shiftKey) isShift = true;
		if(e.keyCode == key.charCodeAt(0) && isShift) {
			e.preventDefault();
			callback.apply(this, args);
			isShift = false;
			return false;
		}
	}).keyup(function(e) {
		if(e.shiftKey){
			e.preventDefault();
			isShift = false;
		}
	});
};

And here is how I call the above function:

$.Shift('A', function() {
	$('div.input').toggleClass('focus');
	if ($('div.input').hasClass('focus') ){
		$('textarea#in').setCaret($('textarea#in').val().length);
		$('textarea#in').focus();
		if ($.browser.opera) {
			operaDelete = true;
		}
	}
	else{
		$('div#smart-add div.details').css('display', 'none');
		$('div#smart-add div.main div.action').text('');
		$('footer').focus();
	}
});

Thanks in advance,
Dimitris

You can use keypress instead of keydown I think.

It might be that IE dont work with keypress in which case you have to use both of them with identical functions.

Thanks a lot!!! That solved my problem. One more question... how can i focus on div with jQuery and Opera; On Firefox that works:

$('div.firstaction').focus();

but not for Opera.

P.S.: The div with class firstaction has display none.

Unfortunately I don't think that is possible. But why do you want to do it? Maybe there is an alternative solution.

Originally posted by RoCkAsTD:

how can i focus on div with jQuery and Opera;

RTFM http://api.jquery.com/focus/

Originally posted by http://api.jquery.com/focus/:

This (focus) event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

So... does your div has a tabindex property set...?

Yes... i have tested this:

<div tabindex="1" class="firstaction"></div>

and this:

<div tabindex=1 class="firstaction"></div>

And none of them worked.

All i want to do is to have one textfield and one div and switching between them by tab, e.g.: I am writing something on textfield, i press tab and div gains focus, so i can navigate on it's elements by keyboard (i have write the necessary jQuery code, this part works perfect on all browsers), then i press again tab and i want my textfield to gains focus. That's all. I have implemented that on Firefox by using .focus() and especially for the tab:

//Tab
if(e.keyCode == 9){
	e.preventDefault();
	...
}

Originally posted by RoCkAsTD:

Yes... i have tested this:
And none of them worked.

Works fine here... :/

Originally posted by RoCkAsTD:

All i want to do is to have one textfield and one div and switching between them by tab, e.g.: I am writing something on textfield, i press tab and div gains focus, so i can navigate on it's elements by keyboard (i have write the necessary jQuery code, this part works perfect on all browsers), then i press again tab and i want my textfield to gains focus. That's all. I have implemented that on Firefox by using .focus() and especially for the tab:

So you're saying that the first TAB works (moves focus from textarea to div) but when you want to go back to textarea it doesn't...? Then it's not the problem with the focus() not working but rather with your implementation... I'm afraid we can't say what is wrong without seeing the code...

No, i can't go to div from textarea with tab. I have to press a lot of times the tab to gain focus the div.