How to move the textbox viewport when gaining focus?

Question

I have a textbox that may contain strings larger than the textbox size. When I'm typing, the textbox "viewport" always moves to show the last character I typed (for example when you write a very large title in a SO question). a

The problem is that if the texbox loses focus, when it is focused again the viewport always is set at the start of the text, and I want it at the end.

I tried moving the caret programatically to the end of the text and it works, but the viewport is still at the beginning of the text, so the user still has to press any key to move the viewport to the end of the text.

Example

This is the textbox before losing focus:

alt text http://img35.imageshack.us/img35/6697/10437837.jpg

And this after focus is lost:

alt text http://img11.imageshack.us/img11/1390/33816597.jpg

I'd like that when the txtbox gains focus again the viewport is set like in the first image.

Is possible to do this ?

Answer 1

Sry, but I don't think it's possible. At least not in clean and browser-consistent way.

Answer 2

Okay, you are battling browser and event limitations here.

You can not simulate a UI-Event in such a way that it mimics human interaction (it's a security issue). However, there are certain built-in ways to manipulate the control of text in a few DOM elements -- The textarea element is a good example of this with its selectionStart/selectionEnd (browser-specific implementation) variables. You should probably note that in Firefox, the selectionStart/selectionEnd make your desired effect, but, again, only under Firefox.

So, your issue can not be solved in a cross-browser way. You would have to go to simulating the effect through text slicing and so forth.

Here is a quick pseudo-code example of what I mean:

element.onblur = function (event) {
    this.hidden = this.value;
    if (this.value.length > (this.offsetsetWidth / 12)) {
        this.shown = this.value.slice(this.value.length - (this.offsetWidth / 12));
        this.value = this.shown;
    }
};

element.onfocus = function (event) {
    this.value = this.hidden || this.value;
};

The slice hack here is based off a ratio of a monospaced font's width (12px) to the width of the element (whatever it may be). So, if we have a box of 144px and we are dealing with a monospaced font, we know that we can fit 12 characters in the box at a time -- so, we slice in this manner.

If the length of the value in the input is 24 characters, we do simple math to slice at (24 - (w/12))'th position into the string.

It's all a hack -- And, in all honesty, is there any practical application to this? Perhaps you should add some subtext under the input that gives an ellipsis-like preview of the last part of the text.