Focus event not firing via Javascript in Chrome - javascript

Since upgrading to the latest Chrome version 34.0.1847.116, the focus event does not seem to be firing when calling
myinput.focus()
in Javascript.
This works fine in Chrome 33.0.1750.154.
test.html
<html>
<head><title>Test</title></head>
<body>
<input id="test_box" onfocus="alert('focused');" />
</body>
</html>
From the console:
document.getElementById('test_box').focus();
No alert in Chrome 34.
Any ideas? Is this a bug? Is there a workaround to fire the event?

The focus event will fire once you unfocus the Chrome Dev Tools.

I don't know if this is actually a bug or bug fix for Chrome v34 if v33 doesn't show the same behavior. (it is due to typing the statement in, in the Console).
If you try http://fiddle.jshell.net/aQ5n6/7/show/
and go to the Console, and type in
document.getElementById('test_box').focus();
it won't alert because the focus is still in the Console... but as soon as you click on the content of the HTML doc (such as any empty space), then it will fire the alert. It looks like when the focus is not actually on the input element (when focus is still on the Console), then the event is not fired.

My Version of Google Chrome is 34.0.1847.116
working here Fiddle
<input id="test_box" onfocus="alert('focused');" />
Advice: Check your console for error or warning.

Related

Input buttons not working in Firefox, working in Chrome?

I have an input button like so:
<input value="submit" type="text" onclick="doThing"/>
Is there any reason why this shouldn't be working in Firefox? I know Firefox functions work differently than in Chrome sometimes, but I'm not sure when this is the case.. I get no console errors in Firefox, annoyingly. The doThing function is not getting fired at all.
Any documentation about why this functions differently in Firefox? Or is this a more obscure bug? Any help would be appreciated, thanks!
Found the solution! Bit of a Firefox quirk. The issue was not with the event listener, it was that somewhere else in my code I had to set the disabled value of my input to true in order to prevent multiple button clicks while my database was updating. In Chrome, when you refresh the page, the value of disabled is reset back to false, but in Firefox there is a feature where it remembers the values of input fields.
Setting autocomplete="off" to my <input/> DOM element did the trick. It now works as intended in both Firefox and Chrome.

Fullscreen not working on Firefox 30

When I am invoking fullscreen mode on Firefox 30 I am getting this error message on Firefox's console -
Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler. jquery.fullscreen.js:182
Everything working fine on Chrome.
I am using this approach for fullscreen : https://github.com/private-face/jquery.fullscreen
You have probably asked the browser to go on fullscreen directly from the code. It can only happen in an eventHandler called from an user action (like a click or keypress).This is what the user message is telling. As you can see, the eventHandler must run fast too. It must be under 1s.
It is for security reasons, so you cannot go fullscreen without requiring the user for confirmation.
Please see the note at MDN or the W3C specification.
There is an javascript confirm dialogue box in between the click of fullscreen button and $.fullscreen() in js side,
Solved the problem by skipping js alert on Firefox browsers.. Still thinking why it works fine on Chrome.

jquery focus command doesn't work from chrome command line

If I have a text page as described below. The call to $("#target").focus(); in the $() section in the header works just fine. I can also bind that command to events in a more realistic page.
However, if I open the chrome console and type $("#target").focus(); it does not change focus. If I run $("#target").val("something"); it changes the value on the screen, but it does not work with focus.
Obviously this isn't a critical problem, but I am really curious why this happens. Anyone have an idea?
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("#target").focus();
});
</script>
</head>
<body>
<input id="target" type="text">
</body>
</html>
You will realize that when clicking on the Chrome console, it will steal focus from any input or textarea control on the current page, and vice versa. That's because the Chrome console actually is implemented using the same HTML controls as any other HTML page, just with special properties which, for instance, prevent Chrome from inspecting the Chrome console recursively.
When you type a command in the Chrome console, i.e. in the input control that is part of the Chrome console, it will keep the focus. The Chrome engineers might have chosen to implement it differently, but in most cases the user will want to continue typing in the Chrome console after firing a command, so no command will release focus from the console.
Kind of possible way is: unfocus / blur your control. Scroll it out of View. Enter the Command to focus in the Chrome Console. If then the Website will scroll up to your Control you can be sure that the Focus Method works.
kind of hackish but works...
try to wrap your highlight code with setTimeout :D and before the timer expire click on the web page.
ele2 = $('#input')
setTimeout(function(){ele2.focus()},4000);

Why is jQuery unload not working in chrome and safari?

unload function in jQuery works fine in Firefox but not in chrome and safari. please check this fiddle in chrome and Firefox. http://jsfiddle.net/jeevankk/Gywnw/2/ . Alerts a message when the page is refreshed.
$(window).unload(function() {
alert("Unload");
});​
This should work to show a confirmation when the users leaves, this is also not part of any standard.
$(window).on('beforeunload ',function() {
return 'Are you sure ?';
});
I found Joseph's comment as the correct answer, So posting this answer.
Dialogs are blocked/prevented during "beforeunload" (with exception to the beforeunload prompt) and "unload" events. Can be confirmed by checking your console.
This is because the unload event is not part of any standard
https://developer.mozilla.org/en/DOM/window.onunload
check the bottom of the page i just linked to.
jQuery's unload works well in chrome too, with the exception that Chrome doesn't allow alerts within it. I've used it to set cookies. And if it works with Chrome hope it works in Safari too.
the unload function of jquery has some problem with browsers..refer the following link
http://bugs.jquery.com/ticket/5538
can you elaborate on the problem so that we can find some work around??
you can use onfocusout on the body .. but i wouldn't recommend if you are trying to use something like an alert, on this operation, asking the user not to leave your page ..
"refresh" action in the Firefox does not fire the unload event.
We should use onbeforeunload instead.
Confirm with Firefox version 47, Mac OS X

See what methods/events being called in JS

Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?
In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.
Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.
#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example

Categories

Resources