Text-align for input tag

Question

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

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

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

Since I am showing the folder path, I am interested in displaying the last folder.
I looked through a lot of posts related to text alignment, but they all advise using "text-align: right".

Answer 1

You can change the direction text input to rtl so that it displays the last part of the path.

For more information, see my answer to a similar question:

• How to disable 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 tail rtl good, but makes it difficult if you really want to change the value. And if you do not want this, why do this input first?

Thus, you can position the cursor at the end of 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;"> 

Answer 3

Try to do this, add this attribute only to this dir="rtl" tag

 <input type="text" value="http://stackoverflow.com/questions" dir="rtl">