How to move the viewing area of ​​a text field when receiving focus?

Question

I have a text field that can contain lines larger than the size of the text field. When I type, the "viewport" of the text field always moves to display the last character I entered (for example, when you write a very large headline in the SO question). but

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

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

Example

This is the text box before losing focus:

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

And this is lost after focus:

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

I would like for the txtbox to focus again so that the viewport is set as in the first image.

Is it possible to do this?

Answer 1

Thief, but I don’t think it is possible. At least not in a clean and consistent browser.

Answer 2

Well, you are struggling with browser restrictions and events.

You cannot simulate a UI event in such a way that it imitates human interaction (this is a security issue). However, there are some built-in ways to control text in multiple DOM elements. The textarea element is a good example of this with its selectStart / selectionEnd variables (specific browser version). You should probably note that in Firefox, selectStart / selectionEnd does the desired effect, but, again, only under Firefox.

So, your problem cannot be solved in a cross-browser way. You will have to go to simulate the effect by slicing text, etc.

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; }; 

Here, the section of the fragment is based on the ratio of the width of the monospaced font (12px) to the width of the element (whatever it may be). So, if we have a rectangle with a size of 144 pixels, and we are dealing with a monospaced font, we know that we can put 12 characters in the field at a time, so we cut it this way.

If the length of the input value is 24 characters, we do simple math to cut in the line (24 - (w / 12)) to the position.

All this hack . And honestly, is there any practical application to this? Perhaps you should add subtext under the tab, which gives an ellipse-like preview of the last part of the text.

Answer 3

I feel like I might have misunderstood the question by reading other answers telling about hacks, etc., but I shot down a quick example that works fine in IE8 and Firefox 3.5.2. Assuming an input element with id = "Test" and calling the following onfocus function:

 function TestFocus() { var Test = document.getElementById("Test"); if (document.selection) { var SEnd = document.selection.createRange(); SEnd.moveStart("character", Test.value.length); SEnd.select(); } else if (Test.setSelectionRange) { Test.setSelectionRange(Test.value.length, Test.value.length); //- Firefox work around, insert a character then delete it var CEvent = document.createEvent("KeyboardEvent"); if (CEvent.initKeyEvent) { CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); Test.dispatchEvent(CEvent); CEvent = document.createEvent("KeyboardEvent"); CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0); Test.dispatchEvent(CEvent); } } //- The following line works for Chrome, but I'm not sure how to set the caret position Test.scrollLeft = Test.scrollWidth; } 

In Firefox, it uses initKeyEvent to send the space key immediately, and then back. In Chrome, I'm not sure how to configure the carriage to the end, but setting scrollLeft in the input almost works, maybe you can play a little with it? As for Opera, I have no idea. I certainly hope this helps you on your journey, though.

Answer 4

One of the ways in which a small hack-y will dynamically reload a text box after focus is lost.

Just save the string in a variable and delete the text box, and then add it back using $ .html () or any other method you like in the string.

Simple, works in browsers, but a little hacked.

Answer 5

set the text-align css property of the text field to align to the right when focus is lost.

with mootools:

 $('#yourtextboxid').setStyle('text-align', 'right');