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);
Related
I'm trying to create a UI that allows a user to hit Enter to progress past most screens. This works great in most browsers, but seems to fail in IE.
I set up a JS Fiddle showing the behavior -- https://jsfiddle.net/fat9qy40/2/. It seems essential that there be some sort of form element that's hidden. In my actual use case, I pop up a div with some instructions and would like the user to be able to hit Enter to dismiss it -- there's still an underlying form beneath that div.
HTML:
<html>
<head>
</head>
<body>
<button>
Fake button
</button>
<div style="z-index:100;position:absolute;top:0;left:0;border:1px solid black;background-color:green;height:50px;padding:10px">
Press enter to see an alert (unless you're using IE!)
</div>
</body>
</html>
JS:
$(document).on('keypress', function(e){
alert(e.which)
})
In Chrome, if I click in the white space in the bottom right and then hit Enter, I get a popup that says "13", which is what I would expect. In IE 11, if I do the same thing, nothing happens. Other keypresses do properly fire the keypress event however; for instance, if I hit F, I get an alert that says "102".
Anyone have any workarounds or suggestions? Thanks!
epascarello nailed it -- thanks! Strangely enough, I had thought to try keydown on my own, but it hit the same bug as keypress.
keyup, on the other hand, works great, and for my use case, I think it's just as good as keypress would have been.
When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.
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.
I have iframe on my page. In firefox, when I tab into the iframe the control goes to html tag in the iframe. (I could see this with document.activeElement.contentWindow.document.activeElement on console.) The next tab gets me to the first control in the iframe.
In IE and chrome it works fine.
Can you please help me, what I am doing wrong?
Thanks
You're doing nothing wrong. Firefox is focusing the root element so that a user who's just using the keyboard can scroll the iframe if he wants to. If the focus went directly to the first text input, for example, the user wouldn't be able to scroll the frame.
And indeed, that's what happens in Chrome. If the subframe happens to not have any text controls in it, the user can scroll it fine after tabbing to it. If it has text controls, the user is screwed if he wants to scroll.
For what it's worth, I just reported this as https://bugs.webkit.org/show_bug.cgi?id=79558 because it seems like a clear accessibility bug...
I'm working on a Chrome extension, and want to use prompt() to get input from the user when they click on certain elements. Unfortunately, for some reason, I can't get prompt() or alert() to work when called as an onclick (or in a jQuery $('#something').click(function), which is how I originally ran into this).
To wit, if I use the HTML below as the popup.html for my extension, the first alert shows up, but the second one flashes on the screen and then immediately disappears without any user intervention. And then the extension popup also immediately closes.
<script>
alert("This alert works");
</script>
<input type="button" onclick="alert('This one disappears')" value="Button"/>
Any thoughts on why this might be happening and how to fix it would be greatly appreciated.
Alerts/prompts are not working inside popups (see this bug report for details). You need to find alternate solution (use html form instead).