text-align for input tag

Question

I use the following code to align the content of an input text field:

Path <input type="text" value="http://stackoverflow.com/questions" style="text-align: right;">

Problem:
This does not work in the case of a long text.

Since I am displaying a folder path, I am interested in displaying the last folder.
I went through many posts posts related to text alignment, but they all advise to use "text-align: right".

Answer 1

You could change the direction of the text input to rtl so that it would show the last part of the path.

For further info, refer to my answer to a similar question here:

• How to cut off overflow on the left side

input[type="text"] {
  /* text-align: right; */
  direction: rtl;
}

Path <input type="text" value="https://stackoverflow.com/questions">

Answer 2

The rtl hack is nice, but makes it hard if you actually want to change the value. And if you don't want that, why make it an input in the first place?

So alternatively, you can set the cursor at the end of the input using a piece of Javascript:

// Wrap it in a function, if you like.
function selectEnd(input) {
    var pos = input.value.length;
    input.setSelectionRange(pos, pos);
    input.blur(); // Switch from not focus..
    input.focus(); // .. to focus, to force the cursor into view.
}

// Call it for your input.
selectEnd(document.getElementById('path'));

Path <input id="path" type="text" value="http://stackoverflow.com/questions" style="text-align: right;">