2

We started testing our application in IE11 and have noticed that window.getSelection() is not getting a selection in IE11 . I don't see any where that this property is not supported in IE11, and as per my understanding window.getSelection should work in all IE versions from 9.

Has anyone else come across this issue? Am I missing something here ?

I have created the below example which would work as expected in older version of IE and also in Chrome but not in IE11.

$('#selectButton').on('click', function() {
    $('#name').select();
    var sel = window.getSelection();
    alert("Slected value in text area : " + sel);

  }

);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='selectAll' id='selectAll'>
  <textarea id='name' name='name'>Sample Value</textarea>
  <br>
  <input type='button' value='Click Me' id='selectButton' />
</form>

UPDATE - On further investigation I have figured out the window.getSelection() does exist in IE 11 but it will not work when the text selected is within an input field like text area. I also know that there used to be a similar bug in FF . At this point I am not sure whether this is a bug in IE or an expected behavior.

IS_EV
  • 988
  • 2
  • 15
  • 29
  • 1
    Possible duplicate of [getSelection() not working in IE](http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie) – jmargolisvt Feb 02 '16 at 20:02

3 Answers3

1

You're not getting the text in the selection, because you've selected nothing.

Interactive elements like textarea have their own selection model, and getSelection method can't be used to get a selection from those elements. This stands for Firefox too.

To fix this in IE and FF, use HTMLInputElement API:

$('#selectButton').on('click', function() {
    var area = $('#name')[0],
        sel;
    area.select();
    sel = area.value.substring(
     area.selectionStart,
        area.selectionEnd
    );
    alert("Selected value in text area : " + sel);
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='selectAll' id='selectAll'>
  <textarea id='name' name='name'>Sample Value</textarea>
  <br>
  <input type='button' value='Click Me' id='selectButton' />
</form>

Additionally, in FF also content editable elements can partially utilize HTMLInputElement API, but are not limited to it only.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • window.getSelection() should work in all IE versions from IE 9 . This also works in the new MS Edge browser . The selection is not occurring in IE11 , as this is a bug in IE11. I confirmed this with MS support. btw, I like your answer and might go for a similar implementation . – IS_EV Feb 04 '16 at 01:46
  • @paulb The selection model seems to have been lived a lot recently. Not that long time ago, the HTMLInputElement API included a mention about using the same model with textarea and content editables too. – Teemu Feb 04 '16 at 18:12
0

I believe the answer is on the page at https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

In the Browser Compatibility section on that page, only version 9 of Internet Explorer is listed. Based on other pages on the Mozilla site, it would have "Yes" listed under Internet Explorer browser compatibility if it were supported in all versions of IE.

gpersell
  • 84
  • 1
  • 10
  • Thanks for the answer. window.getSelection() was working in IE 10, makes me wonder why they stopped supporting it in 11. Also what is the best alternative for window.getSelection() in IE 11? – IS_EV Feb 02 '16 at 22:42
  • 3
    "9" should mean that it is supported **since** version 9 (included). – Oriol Feb 03 '16 at 08:10
0

This seems to have been an issue with IE 11. As per MS this is fixed in their new browser 'Microsoft Edge' but will not be fixed in IE 11.

MS Bug Link

IS_EV
  • 988
  • 2
  • 15
  • 29