Firefox keydown not working when page is initially loaded - javascript

This maybe a no brainer to you. but I am trying to figure out why keydown is not triggered in firefox upon an initial load.
$(document).keydown(function(){alert("test")})
I add the above code in my javascript and when I open my page and without clicking anything but pressing key. I can see that the key pressed is not cautch at all. However, after I click the background of my page then I press keyboard. I can see the key is caught then.
This doesn't happen in Chrome, only in Firefox.
Is anyone familiar with this by any chance.
Thanks

Related

Firefox Android ignores click event when tapping element while oncsreen keyboard is open

When typing into a text box with the on-screen keyboard and then tapping on a clickable element while the keyboard is still open
the on-screen keyboard disappears as expected
the tap is ignored, I see in the debugger that the click event handler isn't even reached
tapping on the clickable element again, it now works as designed.
Tapping on other elements on the page with a click event handler while the keyboard is open works fine. One difference is that the unclickable button comes up only while typing, as it is in an autocomplete dropdown, a <ul> element switched visible by removing display: none after the third character is typed.
This happens on Firefox for Android, recent versions. It works in Chrome. Safari on iPad works, but only since the recent 16.x upgrade.
This looks like a weird browser vs platform quirk. Does anyone happen to know a workaround or can even explain some background
EDIT after further experimentation I have a fairly minimal jsfiddle to demonstrate the problem. It seems that Firefox on Android ignores click handlers which are attached to HTML elements created while the on-screen keyboard is open. Wouldn't mind if someone could confirm in a comment that I am not alone with my FF while waiting on an answer from someone in the know.

pageshow event on iphone fires only once

I'm trying to use pageshow event on safari (iphone) to fix some problems with back button cache. But it seems to work only one time when using back button.
I have this handler on page A:
window.addEventListener("pageshow", function () {
alert("pageshow");
});
Then i go to page B and go back to A - everything works fine. But when I go to page B again and go back to A again, then nothing happens.
example:
go to this fiddle: https://jsfiddle.net/y278q8q0/, then navigate to any other page and play with back and forward buttons. The event will fire only once.
That how it looks on iphone 6 with ios 8.4:
https://vid.me/5WPe
edit:
question was marked as a duplicate of this one: 'pageshow' is not received when pressing "back" button on Safari on *IPad"
It's hard to say if those problems have the same cause. In my case event always fires once at the beginning. Also I tried to implement all non-jquery solutions from mentioned question and none of them is working for me.

Jquery on click does not work when code changes in safari 9.0.1

I have come across a wierd situation where i am unable to fire event in Safari using Jquery on click. The thing is for example: i bind on click to a button and alert hello. First time it works. Now i changed the code in js and say something like alert Jello. Now , it only fires the hello, the old code that i wrote. It is not taking my new changed code which should have alerted Jello. Again, when i changed the id of the button and try again, it wokrs the first time and alerts Jello, after that it's old same.
Note that i have tested this same in firefox but no issues, it gets the changes. also i tried with document and window load but no luck. What do you think of this problem ? Any help is appreciated. Thank You.
It sounds like you're getting a cached version of the javascript being brought back. Try a refresh and clear the cache by using one of the following (depending on whether your on a mac or not):
Hold the Ctrl key and press the F5 key.
Hold the ⇧ Shift key and click the Reload button on the navigation
toolbar.
Hold the Ctrl key and click the Reload button on the navigation
toolbar.
Hold the ⇧ Shift key and press the F5 key.
Wikipedia Reference

IE 10 issue with JQuery, works after selecting different program window and going back

So I have a weird issue in IE 10: I open a JQuery dialog with a drop down and a textbox.
I am opening the dialog in an enter jquery event on the page that opens the dialog window.
My issue does NOT happen when it is the shift event though the code called is the same.
When opened with enter though the drop down list will close as soon as you click it, the mask on the textbox is not showing its graphics and if I select the textbox and press tab the focus keeps snapping back to the textbox.
HOWEVER when I select another program and then IE again, while in the dialog, it starts to work normally again...
When I turned off the mask (jquery.maskedinput-1.3.1.min.js) instead I could not tab away from the drop down list and still could not use clicks on it.
Also without the mask switching to another program and back did not help.
All my code works exactly as it should in FF and Chrome. Also its all normal JQ (Version 1.9.1 and the ui version 1.10.1) except the mask.
Weirdest thing I have seen yet with IE.
Fixed by moving focus to another field before opening the dialog. No idea why.

Google Chrome duplicates JavaScript 'focus' event

I've noticed a strange issue with how Chrome handles javascript focus event. The fact is, it continuosly triggers focus event, even if it occurs only once. I've made a bit of research here and found questions where people run into the same issue when using alert(). When they close the alert window, the focus returns to their inputs and a handler triggers again and again. In my case, the problem is different, as I am using console.log(), and from time to time I get the same log 2 or even 3 times. I've noticed it usually happens when I clear the console, and then focus on an element. When I try to repeat it, it does not occur any more.
The scenario:
Clear console
Focus on element (2 or 3 console messages)
Focus on other identical element or unfocus and focus again on the
same one (no problems)
Clear console
Focus on element (2 or 3 console messages - the problem is back!)
I've created a jsfiddle, please check it out:
http://jsfiddle.net/ffuWT/3/
The question is, what is the reason for this issue and how can I work around it?
Creepy how these things can happen. I've run into this exact issue at work today, but have quickly written this off suspecting dodgy event listening and propagation in a 3rd-party plugin (jQuery customInput). I'll double-check your jsfiddle tomorrow.
I'm unable to recreate your exact output on my currently available setup (Chrome v17 on a Mac) but I do have a theory to share. In your scenario and in Ben Lee's comment the consistent part is shifting focus to another window (console in your case).
Check out http://www.quirksmode.org/dom/events/blurfocus.html under "Window + focusable element":
If the window is sent backward while a focusable element is focused,
blur events should fire on both. If the window is brought forward
again, focus events should fire on both.
And next, in the compatibility table it's noted that
Safari Windows fires two focus events.
Maybe Chrome finally got this "feature" too, coming from the Webkit family and all?
I was able to recreate the problem (using your jsFiddle) and from what I can see it only occurs when you click the select without having focus on/in the result frame.
Click within the frame but not on the selects before you click to expand one of the selects and you´ll only see one line logged.
You can also append /show to the jsFiddle URL to view the result in a separate window.
It seems like focusing the window by clicking on a select control triggers the event multiple times.
Open this demo and unfocus the browser window (by clicking the desktop, taskbar or another window) and then click on one of the selects to expand its options and view the console.
Using Chrome 17.0.963.79 m.

Categories

Resources