Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Nov 2008
    Thanked 0 Times in 0 Posts

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

    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.


    //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"/>';

    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.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.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!
    Last edited by chidge; 07-24-2009 at 03:17 PM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts