Strange behavior of selection

Question

My JS code:

    function getSelectedText(){
      if(window.getSelection){
          select = window.getSelection().getRangeAt(0);
                  var st_span = select.startContainer.parentNode.getAttribute("id").split("_")[1];
                  var end_span = select.endContainer.parentNode.getAttribute("id").split("_")[1];
                  console.log(select.endContainer);
                  var ret_urn=[st_span,end_span];
                  return ret_urn
      }
      else if(document.getSelection){
          return document.getSelection();
      }

    }
    $(document).ready(function() {
      $("div#check_button button").click(function () {
                      var loc = getSelectedText();
                      console.log(loc);
                      });
    });
    

Here is my whole html file: http://pastebin.com/acdiU623

It is hard to explain it, so I prepared short movie: http://www.youtube.com/watch?v=tVk4K70JO80

In a few words: when I press left mouse button and hold it to select text/numbers and start selection from the half of letter/number, although this letter/number is not highlighted, it is added to selection. I have to start selection precisely. It is ok with wide letters, but hard with letters like i,j or l.

This is second example of my movie. I pressed left button on 3/4 of length of number 5, although 5 is not highlighted, it is selected.

Tested on FF and Opera.

Answer 1

Ok just tried this demo. and it works flawlessly. it even works on firefox. Just tested opera and safari and it works on both of them as well. Even if i select half a letter or number, it just returns the highlighted text which is what is expected when you make a selection.

try it out on a fresh webpage though just for testing purposes. then when it works and you are satisfied with the results then start making changes to your existing page.

Its a lot more simpler than your code. This is a cross-browser script to get text selected by the user

<script language=javascript>
function getSelText()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
document.aform.selectedtext.value =  txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name=aform >
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

http://www.codetoad.com/javascript_get_selected_text.asp

Hope this helps.

PK

Answer 2

There are multiple different boundary points for a selection that will look the same to the user. What you're seeing is probably the difference between the following, where | is a selection boundary:

<span>5</span><span>|6</span><span>7|</span><span>8</span>

and

<span>5|</span><span>6</span><span>7</span><span>|8</span>

In both cases, calling toString() on the selection will give you the same result ("67").