Highlight lost IE 8 Execcommand when focusing on input -please help

[chidge]

Hello Guys and Gals,

I have a simple wysiwyg editor from various help, searching and research and input from here (big thanks to Jason Davis) for his cross browser selection code.

I currently have a problem with IE8 (more than likely the others to) that I am hoping someone can help me with here...


To paint the picture (without posting reams of my code) The user clicks an image, a link creation div then appears, this div contains two inputs with which to enter the links url and the links title tag respectively and also a selection list for the links target. On submit the userSelection.pasteHTML is called and all works well and I then have a link in my iframe with target and title denoted by the user - all great and all working as intended.

But I have a problem with the inputs onfocus() taking away the userSelections highlight (and only in IE - in firefox, safari, operah and chrome it works fine).
The highlight remains until I click in an input within the div link creator pop up, once I click on an input the focus is taken from the userSelection and given to the input meaning that the selection highlight visably disapears from the usersSelection in the iframe. Bit of a problem as the user will then think oh the selection has gone and click back to select it again. The selection doesnt actually disapear because I then successfully write to it with pasteHTML.... just the highlight in IE goes.



DIV LINK CREATOR POPUP

//function to getElementById
function id(name) {
	return document.getElementById(name);
};


//insert the div link creator div into the page
var linkButton = id('link');
			
var linkDiv = create('div');
linkDiv.id = 'linkcreation';
linkDiv.innerHTML = '<div class="link_bridge"></div>' +
                           '<span id="lk_add">Link Address</span><input id="linkurl" name="linkurl" type="text" value="http://"/>' +
			   '<span id="alt_add">Title Text</span><input id="linkalt" name="linkalt" type="text" />' +
			   '<span id="tar_add">Open link:</span><span id="link_target_img" class="wysiwyg_tar"></span>' +
			   '<div id="display_target"></div>' +
			   '<div id="errormsg"></div>' +
			   '<input id="linkurl_submit" type="button" name="linkurl_submit" value="Submit"/>';
			
insertAfter(linkDiv,linkButton);

So I have captured a selection from my iframe in IE

//get users selection from the iframe
var userSelection = iframe.contentWindow.document.selection.createRange();

I can then add information into this selection by using

id('linkurl_submit').onclick = function(){
if (document.selection) { 			
 userSelection.select();
 userSelection.pasteHTML('<a href="' + location + '" title="' + alternative + '" target="' + target + '">' + userSelection.text + '</a>');
}
}

What I am looking for is a way to visually keep the highlight on the user Selection even when I click within an input in the div link creator popup menu.

I have tried various things such as

			
userSelection.select();
userSelection.pasteHTML('<span stye="background-color:#000000;color:#666666;">' + userSelection.text + '</span>');

or even

if(document.selection){ //stupid IE
id('linkurl').onfocus = function(){ userSelection.select();}

which keeps the visible highlight but means i cant focus on the input.



Anyway I am a bit stuck can anyone help me out with this?

Thanks in advance if you can, bring on the days of one browser - I feel they are not to far away.


//oh IE why do you keep pushing me away!