Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2014
    Posts
    269
    Thanks
    1
    Thanked 47 Times in 45 Posts

    Problems with selection in IE

    IE is driving me mad. The following code runs on all browsers (including edge), but not in IE. I googled for a solution but no luck. I suspect that the highlited code is not implemented in IE. Does anybody know how to use Selection in IE?

    Code:
    if (window.getSelection) {
    	Selection = window.getSelection();
    	} else if (document.selection) { // should come last; Opera!
    		Selection = document.selection.createRange();
    }
    
    // insert a new character inside the selection
    
    var newNode = document.createTextNode('this is a test');
    var range = Selection.getRangeAt(0);
    range.deleteContents();
    range.insertNode(newNode);
    range.detach();
    			
    // format the selection
    			
    var newNode = document.createElement('B');	
    var range = Selection.getRangeAt(0);
    var documentFragment = range.extractContents();
    range.deleteContents();
    newNode.appendChild(documentFragment)
    range.insertNode(newNode);
    range.detach();

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,189
    Thanks
    4
    Thanked 463 Times in 451 Posts
    That 'last for Opera' thing is back-assward, and is PART of what is breaking things in IE for you. Flip those around as IE9/newer will be trying to use window.getSelection which doesn't work right in those!

    Opera shouldn't care anymore since they killed off their own engine and slapped their logo onto Chromium any-old-way, in the process killing off any and all features that made loyal fans pick Opera in the first place. There's a reason "real" Opera users migrated to Vivaldi! You're more likely to find people still running IE 5.5 or 5.2 Mac than you are those running Opera 12/earlier.

    I'm also certain that document.selection.createRange does NOT function like window.getSelection. In fact I don't think document.selection even exists as a property of document, and if it does it most certainly does NOT behave like the selection object you get from window.getSelection. What you should probably have is just "document.createRange" but beware that a Range object has entirely different properties and methods from a Selection object.

    https://developer.mozilla.org/en-US/docs/Web/API/Range

    WAY different from selection:

    https://developer.mozilla.org/en-US/.../API/Selection

    So pretty much if at document.selection version is run, none of the code after it will work anyways.


    Hence in my own codebases just selecting all content of a DOM element ends up something like this:

    Code:
    	var selectElement;
    	if (document.selection) {
    		selectElement = function(element) {
    			var temp = document.body.createTextRange();
    			temp.moveToElementText(element);
    			temp.select();
    			return true;
    		};
    	} else if (window.getSelection) {
    		selectElement = function(element) {
    			var
    				tempRange = document.createRange(),
    				tempSel = window.getSelection();
    			tempRange.selectNodeContents(element);
    			tempSel.removeAllRanges();
    			tempSel.addRange(tempRange);
    			return true;
    		};
    	} else {
    		selectElement = function(element) {
    			console.log('This browser does not support selection manipulation');
    		};
    		return false;
    	}
    The two objects work entirely differently from each-other. Snipping out part of a Range for replacement is... well, difficult at best. It's really not built for that.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  3. Users who have thanked deathshadow for this post:

    josephm (Jul 9th, 2018)

  4. #3
    Regular Coder
    Join Date
    Sep 2014
    Posts
    269
    Thanks
    1
    Thanked 47 Times in 45 Posts
    DS: thank you. i'll check it out tonight when I get home.

  5. #4
    Regular Coder
    Join Date
    Sep 2014
    Posts
    269
    Thanks
    1
    Thanked 47 Times in 45 Posts
    DS: Thanks, I got it working.

    The difference is that in IE, you manipulate the selection as a HTML string. That is, you request for the selection and it will give you back the string. So if you want to make the selection bold, you simply wrap the selection string with '<B>selection</B>', then you feed it back as the new selection.

    Tricky. IE does not support the Array.includes, for example. There are others, but what can we do. That's iE.


 

Tags for this Thread

Posting Permissions

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