Search jQuery

jQuery Forum

$('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

in Using jQuery • 7 years ago

I have a piece of code that creates a popup with a textbox and two buttons. The code tracks which item has focus to trigger proper events. The problem is that the method ($('.').is(":focus")) does not seem to work for <input type=submit>. It works for <input type=text>. Is there a reason for this?

Alternatively, is there a better way to track if a button was pressed in this case? I still want to retain the ability to hide the popup if the user clicks off outside the content box with inputs.

Here is the relevant code:

//Editbox was clicked: manages all events, including button clicks.
$('body').on('click', '#editbox', function() {
if ($('.editURL').is(":focus")) {
alert("Textbox has focus!");
return;
}
if ($('.submitURL').is(":focus"))
{
alert("Clicked the Save button!");
return;
}
if ($('.cancelURL').is(":focus"))
{
alert("Clicked the Cancel button!");
$('#editbox').hide();
return;
}
$('#editbox').hide();
return;
});

Replies(5)

watusiware

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

7 years ago

What are you actually trying to do?

Focus and clicking are not the same thing! At. All.

Maybe there is some browser difference when you click, and some browsers might first fire focus and then click, while other might just fire click.

Please don't use alert() for debugging asynchronous events. Use console.log().

J Boy

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

7 years ago

I have a popup that occupies the entire window and in the middle of it there is a div with a textbox and two buttons. I want the popup to go away if user clicks on the area outside the div. I also want to be able to run functionality upon buttons pressed. The reason I started using focus in stead of click is that I wanted to use it in an if-statement. I am new to jQuery and JS.

gautamx07

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

7 years ago

Do you want something like this , SEE HERE. see how there are a couple of ways atleast to dismiss the modal , one of them being clicking anywhere outside the modal, for that , all you'll have to do is , add a peice of code like so:

$(document).on('click' , function(){
/* code to close your modal/dialog
eg. $('#dialog').css({'display' : 'none'});
*/
});

I also want to be able to run functionality upon buttons pressed.

use the click event handler , HERE.

The reason I started using focus in stead of click is that I wanted to use it in an if-statement. I am new to jQuery and JS.

can you describe your use case a bit more in detail ?

J Boy

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

7 years ago

Basically, I have a huge table with images. It is a frontpage heroslider CMS. When I click edit on one of the images, I have a <div> popup that is called editbox. That editbox needs to contain a textbox for URL to be saved, Cancel and Save buttons.

What I am trying to achieve: if the user clicks away from the box with buttons and textbox, the entire editbox just goes away and he is back to the table with images. If the user clicks Cancel, the editbox also goes away. If the user clicks Save, I then intend to call a jQuery AJAX to post that information to DB.

If you can see a better way of doing this, please let me know. That said, I am still curious why the focus attribute would behave differently in Firefox and Safari.

P.S. Is there a way to use the click() as a boolean? That is, can I check along the lines of

if button1.click() { } else { } ?

gautamx07

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

7 years ago

What I am trying to achieve: if the user clicks away from the box with buttons and textbox, the entire editbox just goes away and he is back to the table with images. If the user clicks Cancel, the editbox also goes away.

If you checked the example i provided , thats exactly whats happening.

P.S. Is there a way to use the click() as a boolean? That is, can I check along the lines of

$(document).on('click' , ' #mybtn ' ,function(){
// do something
});

if you want to use it as a boolean (i am not sure what you would want to , but you can use a flag).

something like:

var click_flag = false;
$(document).on('click' , '#mybtn' ,function(){
click_flag = true;
if(click_flag) // do something
});

Top Reply

Response title

Attachments

jQuery Forum

$('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Replies(5)

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Re: $('. ').is(":focus") Works Differently in Safari, Firefox and Chrome

Statistics

Tags

Actions