Is there any way I can determine the currently focused control on a web page? I wish to save the focused control before my ajax callback and restore it afterwards.
Can this be easily determined?
Thanks,
AJ
Use:
document.activeElement
This has not been officially standardized yet (it will be in HTML5), but most, if not all, modern browsers support it. It started in Internet Explorer so all versions of IE will support it. Firefox has supported it since FF3. Chrome also supports it and I assume Safari does as well.
If you are using jQuery you can solve this with the http://plugins.jquery.com/project/focused plugin
// elm is the DOM Element owning the focus or null if no
// DOM Element has the focus
var elm = jQuery.focused();
Try using document.activeElement.
Many browsers now support document.activeElement.
Works in:
Firefox
IE 6,7,8
Chrome
Safari
Opera
Related
The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.
I know it works in my (updated) version of Firefox. Anyone has more info?
This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.
Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:
someDiv.removeAttribute("hidden");
Workaround is to set the attribute to "false" immediately before removing it.
someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");
This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.
Looking in this site I see in the browser compatibility section, it looks like this
What does that mean? What do I have to do to use that property in safari?
If I go element.scrollTop, that works just like that?
Webkit is the browser engine used by Safari and Chrome, the mentioned item in MDN it's only to clarify that all versions in Safari that use webkit (since like forever) support the property perfectly.
Nothing to worry about, just use it wisely as you would with any other modern browser
Is there a way to do feature detection for setDragImage of HTML5 Drag and Drop (in JavaScript or Dart)?
I do the general HTML5 Drag and Drop feature detection with the following (from guide to detecting everything):
return 'draggable' in document.createElement('span');
This will return true for Chrome, Firefox, etc., and IE10. It will return false for IE9.
Now, the problem is with IE10: While it supports most of HTML5 Drag and Drop, setDragImage is not supported and I need to provide a polyfill just for setDragImage. But I couldn't figure out a way how to detect this.
This solution assumes general D&D support has already been checked.
JavaScript (tested in IE, Firefox, Opera and Chrome):
function test() {
var testVar = window.DataTransfer || window.Clipboard; // Clipboard is for Chrome
if("setDragImage" in testVar.prototype) {
window.alert("supported");
} else {
window.alert("not supported");
}
}
Dart:
I didn't find a way to do this with "native" Dart code, so js-interop is the way to go.
You can use the setDragImage-IE polyfill:
https://github.com/MihaiValentin/setDragImage-IE
This is how it actually works (from the README):
I noticed that if you make a change to the element's style (adding a
class that changes appearance) inside the dragstart event and then
removing it immediately in a setTimeout, Internet Explorer will make
a bitmap copy of the modified element and will use it for dragging.
So, what this library actually does is implement the setDragImage
method that changes the target's element style by adding a class that
includes the image that you want to appear while dragging, and then
removes it. In this way, the browser displays the temporary style of
the element as the drag image.
The feature detection mentioned in the previous answer fails in Opera 12 -- because it claims support for setDragImage, it just doesn't work. The Dart libraries that have been linked to also fail entirely in Opera 12, throwing multiple errors to the console.
It's actually not possible to polyfill a ghost image -- even if you create a document element and position it in the right place, you can't get rid of the default one without setDragImage.
The only solution I know of is to filter-out Opera 12 and all versions of IE (up to and including IE11) and treat them as legacy browsers, which have to be catered for with traditional mouse-event scripting. Since the direct feature testing fails, I would recommend an indirect object test (i.e. use an object test to detect those specific browsers):
var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));
I'm looking for a way insert JS into web page using CSS file, in Opera. In Internet Explorer [I tested it on 5.5,6,7,8] it's possible using behaviour property.
behavior: url(file.htc);
From my experience it's very useful. Now I need it for Opera.
There is no such equivalent feature in Opera.
You'll have to find another way to solve your problem.
The behaviour property is a proprietary to internet explorer. So it's unlikely you will find an equivalent.
However interestingly, looking through an old W3 working draft, it is proposed as a standard - but I haven't seen anything about other browsers actually supporting it nor an equivalent.
On a side note:
The behaviour property is very useful for "patching" internet explorer to enhance old browsers with newer features e.g. adding css3 rounded corner support etc. But at this time, because it is non-standard I would not recommend using it for anything other than adding support to outdated browsers.
I'm using the code that netadictos posted to the question here. All I want to do is to display a warning when a user is navigating away from or closing a window/tab.
The code that netadictos posted seems to work fine in IE7, FF 3.0.5, Safari 3.2.1, and Chrome but it doesn't work in Opera v9.63. Does anyone know of way of doing the same thing in Opera?
Thx, Trev
Opera does not support window.onbeforeunload at the moment. It will be supported in some future version, but has not been a sufficiently high priority to get implemented as of Opera 11.
onbeforeunload is now supported in Opera 15 based on the WebKit engine but not in any prior versions based on Presto.
Have you tried this?
history.navigationMode = 'compatible';
Reference, found via this page
I haven't actually tried it myself, but it looks promising.
Mobile Safari (iPhone/iPad) also doesn't support onbeforeunload, and I strongly suspect it is not likely to.
For detecting back/forward navigation there may be workarounds e.g. see Is there an alternative method to use onbeforeunload in mobile safari?.