Detect autofill for Edge browser - javascript

Edge browser recently released support for autofill and I wanna apply the same custom style I have for Chrome in Edge, but apparently the tag :-webkit-autofill doesn't work. Can someone help me on what to do in this case? I've spend half a day searching for the correct tag, but I couldn't find anything.

I found the solution and what Edge does is that it includes a class called edge-autofilled in the input.

Related

Detect overwrite mode in MS Edge

I'm writing a script which leverages keypresses, and I have need of detecting whether or not the user is in insert mode or overwrite mode.
Fortunately overwrite mode is not a thing in Firefox, Chrome, or Safari, but it is in Edge.
I've done copious amounts of searching and the only applicable code I have found is:
document.queryCommandValue("OverWrite");
However this seems to have gone unsupported since IE11 from what I can gather. In Edge it returns an empty string regardless of whether or not you are in insert mode.
I've tried using document.queryCommandState('OverWrite'); instead, however likewise it always returns false.
Is anyone aware of the new way to test for this, assuming it is a thing that is possible to test for?
I try to test it with MS Edge and I am able to produce the issue. It can be possible that it is some kind of bug or the Edge team needs to add the support of the API. I will try to submit the feedback regarding this issue.
As a workaround, you could refer to this answer. You could use the jsfiddle demo in the answer to detect the overwrite mode in Edge. But the draw back of the function is when you add characters at the end of the inputs, the mode detect will not work.

How to check if browser supports pseudo-elements in javascript?

I'm developing a website that should run in ancient browsers (IE 7/8/9, Safari 5.1.7). Our target customer is the old people.
I'm no expert in javascript and I searched for solution. My title question is very straight-forward.
I used input radio and others that has custom design using before and after.
If it's checked. I just toggle in after and before display property in css.
The problem is when the user is using ancient browser, the input radio will never appear. My idea is toggle display in input radio if the browser doesn't support pseudo-elements.
For CSS feature detection there really is no need to reinvent the wheel, tools like Modernizr do this perfectly and have a very small footprint, since you can select only the feature detects that you need.
Seeing as you want to support IE <8, I would strongly advise you to use it, since you're probably going to run into a lot of situations where CSS/JS features are unavailable.
Detect if they have a sufficient browser: http://caniuse.com/#feat=css-gencontent
Basically, IE8 (maybe 9 depending on what you need) and older don't work, everything else does.
You may find the library Modernizr useful in this instance. It allows you to test for browser features.
Optionally if you want to shim it so you know that the browser will support it you can use Selectivizr

Disable autocorrect / autocompletion in content editable div

I m developing a cross-browser application in Script#.
I m using a contenteditable div, where user can add text. But i dont want the auto correct/ auto completion feature to change the user text.
Plz tell me how can i disable this feature.
It should work on all platforms. ( iOS, Android, Windows)
I have tried autocorrect="off";
autocomplete="off"
but nothing is working. plz help....
What you can do is to use the attribute spellcheck=false. This is (in HTML5 CR) the defined way to disable “checking of spelling and grammar of editable text”. The default value of this element is browser-dependent, and the value may depend on element. E.g., in Chrome, the default is spellcheck=true for an element that has been made editable using the contenteditable attribute.
However, this affects (at most) only what happens in the browser. Software external to the browser, such as a system’s keyboard reading routines, are probably immune to anything you say in HTML.
You are using the correct attributes, but I'm not positive if they are expected to work with contenteditable (they are definitely supported for and tags). Current iOS versions(at least v6.1 and up) will currently support those attributes, however there is a bug in Chrome for Android not respecting these HTML 5 attributes. It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...

jquery formatcurrency error on IE and Chrome

I'm having a problem on IE and Chrome when using the jQuery Format Currency and the jCaret plugins.
The problem is described here: http://code.google.com/p/jquery-formatcurrency/issues/detail?id=23&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Opened
When using the fix shown there, format as you type only works on Firefox. On other browsers the cursor stays "blocked" on the input control and you can't select other control. It seems the focus() event is looping.
I've created a jsFiddle to test this situation: http://jsfiddle.net/B3xA6/4/
Help is appreciated on getting this to work (especially on IE).
Thank you

IE8 Crash on getStyle background-position

I've found a strange bug in Internet Explorer 8. Maybe someone can help me move around it.
When I try to grab the background position of an element, using background-position-x all versions of Internet Explorer work as excepted except for IE8 that crashes.
When I run el.getStyle('background-position') all browsers give me the correct values except from IE (6, 7 and 8) that return undefined.
I therefore use el.getStyle('background-position-x') for all IE versions.
IE8, however, crashes on the above code.
Anyone had similar problems?
Thanks for the help everyone. This really is a bug and works only on the following scenario.
css must be loaded on an external stylesheet
element has no inline styling
The way to fix it, even tough dirty, is to add inline styling to the element. Makes IE8 happy and all other browsers work.
I did not test but, according to this ticket, FF2 also suffers from the same behavior.
Side notes:
#marcgg - I was going to downvote your answer as it really is not helpful (and bound to start a flame war) but, all truth said, jQuery does not manifest this problem. Even though, as you probably already knew, it is NOT an option! ;)
#Fabien - IE does support background-position-x and lacks support for background-position the W3C approved construction.
Why not use jquery's css function that works fine crossbrowser ?
Try using:
el.getStyle('backgroundPositionX')
and
el.getStyle('backgroundPositionX')
yes, older thread, but figured I'd post another solution that I bumped into # mootools lighthouse....
if (Browser.Engine.trident){
var xy = el.getStyle('background-position-x')+" "+el.getStyle('background-position-y');
} else {
var xy = el.getStyle("backgroundPosition");
}
works well for me so far.

Categories

Resources