I have the following problem. In text input filed which work as an auto-pleter some of suggestions it returns are wither than it. The problem es 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?

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

(The used code is written in jQuery.)

I have the following problem. In text input filed which work as an auto-pleter some of suggestions it returns are wither than it. The problem es 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?

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

(The used code is written in jQuery.)

• javascript
• jquery
• internet-explorer-6
• internet-explorer-8
• textrange

Share Improve this question Follow edited Oct 28, 2009 at 13:56 Jeremy Stein 19.7k1818 gold badges7070 silver badges8484 bronze badges asked Oct 16, 2009 at 13:17 bozhidarcbozhidarc 85411 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

(Tested functional in IE8)

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/dom/range_intro.html

And here for patability: http://www.quirksmode/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.

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%');
   });