text-align cho thẻ đầu vào

Question

tôi sử dụng đoạn mã sau để sắp xếp nội dung của một trường văn bản đầu vào:

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

Vấn đề:
này không hoạt động trong trường hợp của một văn bản dài.

Vì tôi đang hiển thị đường dẫn thư mục, tôi muốn hiển thị thư mục cuối cùng.
Tôi đã xem nhiều bài đăng liên quan đến căn chỉnh văn bản, nhưng tất cả họ đều khuyên bạn nên sử dụng "căn chỉnh văn bản: đúng".

Answer 1

Bạn có thể thay đổi direction của kiểu nhập văn bản thành rtl để nó hiển thị phần cuối cùng của đường dẫn.

Đối biết thêm thông tin, hãy tham khảo câu trả lời của tôi đến một câu hỏi tương tự ở đây:

• 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

Hãy thử làm như thế này, thêm thuộc tính này chỉ để thẻ này dir="rtl"

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

Answer 3

Số rtl hack là tốt, nhưng sẽ rất khó nếu bạn thực sự muốn thay đổi giá trị. Và nếu bạn không muốn điều đó, tại sao làm cho nó một input ở nơi đầu tiên?

Vì vậy, cách khác, bạn có thể đặt con trỏ vào cuối đầu vào sử dụng một đoạn 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;">