Override IE email auto-formatting in rich-text editor - javascript

Our site makes use of FreeTextBox, a web-based, rich-text editor. In IE, but in not Firefox, if a user types in something like:
someone#blah
IE automatically creates a mailto hyperlink. I have tested this with other text editors out there and the story is the same with all of them.
Can I override this browser behavior somehow from within my application?

This has to do with the MSHTML editor, which (I'm guessing all) Windows browsers use to instantiate rich text editors. There's a setting called IDM_AUTOURLDETECT_MODE that lets you decide if the autolinking will take place, and the default is true (other browsers apparently set it to false on instantiation, hence no autolinking in Firefox.)
Unfortunately, until recently Microsoft didn't have a mapping from the command ID to a command identifier string, so the function wasn't accessible via Javascript prior to IE9.
I just tried it out in IE9 and can confirm that, for that version and presumably all future ones, you can override the feature by calling
document.execCommand("AutoUrlDetect", false, false);
Note that it's IE9+ only, so you're still stuck for previous versions, and that you'll want to wait until the DOM is loaded before you call it and have some error handling around it, etc, etc.
There's a good summary of the original issue here, and a discussion of the fix in the minor change list here.

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

Internet Explorer 7 onclick event on submit button does not fire

I have a form which submits via ajax to the back-end and I'm writing a general disable function in javascript that I can use to set the onclick of an element. Typing this into the browser so ignore any syntax errors in the following.
function(elementID , processingText) {
var element = document.getElementById(elementID);
if (element) {
element.setAttribute("onClick", "alert('test')");
}
}
So basically the element should have an onclick event to set an alert. I can confirm that the onclick attribute is being set correctly and it fires in IE8+, Chrome and Firefox. It will not fire in IE7.
The element I'm testing on is a submit button in a form (one form on the page). It has many fields and one submit button.
EDIT The code dispatches with an action so it should submit anyway but not until after the alert has been acknowledged /EDIT
I've trawled the net for the past two hours and the following solutions do not work or are not an option-
Add a hidden input field to form.
Wrap submit button in tag and set the onclick in this tag.
Changing case of onclick to onClick
Any solutions which involve altering the html without using javascript are not an option, I'm trying to create a general disableElement function. I can target the script at IE7 so it does not have to work in all browsers, just IE7.
Any help would be greatly appreciated
IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.
Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.
The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.
If you do use jQuery, your code will become:
$(element).click(function() {alert('test');});
Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.
IE 7 does support setAttribute method but it seems that it is not possible to change an onclick attribute with it. For more info about this issue check this: Why does an onclick property set with setAttribute fail to work in IE?
Cheers

Javascript autocomplete works in IE and Chrome, doesn't work in Firefox

I'm working on a client's site which utilizes a Javascript autocomplete feature in the search form. The website is in Hebrew, but please don't let that scare you away - my issue is in code, not English. :)
Link: -removed by author-
Most of the autocompletion options are in Hebrew but I added "test" so that it will be easy to test in English as well.
Basically this autocomplete script generates a text input box, and when the user types in a letter (onkeyup), a list of common values are offered (e.g. "test").
This works fine in both Chrome and IE, but for some reason Firefox is behaving differently.
When you enter a letter in Firefox, according to the error console:
Error: searchResult1 is not defined
Source File:
Line: 1
Same goes for searchResult0 in the second input field (line ~460 in the source code).
If you look at -removed- the autocomplete script does work in Firefox, so I don't really know what it is I could have changed that broke its functionality.
Thank you for any help with this :)
The problem is onkeyup="searchResult1.style.visibility='visible';...", it should be document.getElementById('searchResult1').style.visibility - you are referring to an element by its ID. It's an old MSIE feature that elements with an ID turn into "global variables" but that's really not something you should use. Other browsers implemented support for this misfeature ("global scope pollution") to stay compatible with MSIE but it is merely a compatibility layer and only kicks in under certain conditions.
Why don't you try using jquery autocomplete plugin rather than writing something on your own. The javascript written is not proper.
Its best to use the jquery autocomplete plugin. I see in you code you are jquery1.5.2
Autocomplete Demo:
http://view.jquery.com/trunk/plugins/autocomplete/demo/
Download and documentation
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Internet Explorer Email Address Autolink -- Disable?

I'm trying to use a component called Codemirror for in-browser source code editing. It works great, but IE7 has a bug (feature?) that autolinks all email addresses that are typed into the code editing window.
For example, if I type String x = "me#mydomain.com";, IE turns this into String x = me#mydomain.com; -- it strips the quotes and underlines it.
Does anyone know how to override or disable this? Thank you.
-tjw
I have heard about Codemirror, but I did not used it yet, have you tried:
· Changing the # for #?
· Adding a part of the string to the other?
· Parsing the final result to String again?
Using single quotes instead of double should work. I've tested it in IE8 and IE9 RC1.
I presume the component is using a Web Browser Control under the covers, which seems like an odd choice. You can prevent automatic hyperlink generation using ExecCommand(IDM_AUTOURLDETECT_MODE); see http://msdn.microsoft.com/en-us/library/aa769893(v=vs.85).aspx
Prior to IE9, it was not possible to specify IDM_AUTOURLDETECT_MODE from JavaScript, meaning that pages could not disable automatic hyperlinking in ContentEditable areas. A new command constant AutoUrlDetect is supported in IE9, allowing script to disable automatic hyperlinking as follows: document.execCommand("AutoUrlDetect", false, false)

Categories

Resources