createTextRange - strange behavior in IE8

Question

I have the following problem. In text input filed which work as an auto-completer some of suggestions it returns are wither than it. The problem comes when you leave the field. In IE the text cursor is positioned on the end of the suggested string, so you can actually see only the last part of it. So I used the code bellow to fix this and it works under IE6, but in IE8 this doesn't work, the field is always selected and I can not select anything on the page.

My question is what is the right way to move the cursor in the beginning of input field, after I leave it?

$('#myAutocompleter').blur(function(){
  textRange = this.createTextRange();
  textRange.collapse(true);
  textRange.select();
});

(The used code is written in jQuery.)

Answer 1

I'm not sure I understand your question, but IE has it's own set of methods for handling text selection on a page, so that would be why it behaves differently.

Look here for a tutorial: http://www.quirksmode.org/dom/range_intro.html

And here for compatability: http://www.quirksmode.org/dom/w3c_range.html

If that's not your problem, try doing a mouseup or click event check inside blur and putting the selection code there? Maybe that'll cause the selection to move away from the input field before placing it where the selection is.

Answer 2

I had a similar situation where I wanted to see the top/bottom of something depending upon things like this. I used the jQuery scrollTo plugin

).scrollTo('100%')

).scrollTo('0%')

EDIT 1: I am using it on this field:

<textarea cols="57" rows="2" class="cssTextarea cptEntryArea"></textarea>

with this code:

  $(".cptEntryArea").change(function()
        {
           $(this).scrollTo('0%');
   });

Answer 3

I believe what you're looking for are the .moveStart and .moveEnd methods of the text range:

$('#myAutocompleter').blur(function(){
  textRange = this.createTextRange();
  textRange.collapse(true);
  textRange.moveEnd('character',0);
  textRange.moveStart('character',0);
  textRange.select();
});

(Tested functional in IE8)