How can I cause the text to overflow to the left of my text input?

Question

I have an input field (of variable width) with text which is longer than it can display. By default, it shows the leftmost section of the string (i.e. the first part of the string) and hides the excess (the rightmost part, i.e. the end of the string).

<input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;">

When one clicks in the input field, one can move the window, and view any part of the string. When the cursor is at the end of the string, only the end section is displayed - the first part of the string is cut off, and hidden:

I want the input field to always look like this, by preferring to cut off the front of the string, rather than the end (simply because for this specific input the end of the string is more useful to see than the start).

Using text-align: right unfortunately doesn't achieve this - it only causes the text to be right aligned when the full text can fit:

I'd rather not use JS to cut the length of the string, as this would prevent the user being able to edit it.

To be clear, I would like this to happen all the time, rather than only when it's focused via Use JavaScript to place cursor at end of text in text input element

If it is on focus you can use https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element — Get Off My Lawn, Apr 23 '20 at 14:13
@GetOffMyLawn thanks, yeah. I'd quite like it to be all the time (even when not focused) although I've implemented that one as a halfway-house. — Tim, Apr 23 '20 at 14:14
I think you might have to implement a content editable div that way you can control its alignment. I don't think you can do it with a normal text field. — Get Off My Lawn, Apr 23 '20 at 14:15

Get Off My Lawn · Answer 1 · 2020-04-23T14:58:45.197

To achieve what you are looking for use a content editable div. With it you can use justify-content with flexbox.

div[type=text] {
  /* Scroll to the end */
  justify-content: flex-end;
  display: inline-flex;
  
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

If you don't like the right alignment, we can remove the flexbox and use javascript to align the items:

[...document.querySelectorAll('div[type=text]')].forEach(el => {
  el.scrollLeft = el.scrollWidth;
})

div[type=text] {
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

h3t1 · Answer 2 · 2020-04-23T15:35:49.580

1

<input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;" dir="rtl" onfocus="this.dir='auto';this.scrollLeft = this.scrollWidth;" onfocusout="this.scrollLeft = this.scrollWidth;">

edited Apr 23 '20 at 15:35

answered Apr 23 '20 at 15:15

h3t1

1,126
2
18
29

score 0 · Answer 3 · answered Apr 23 '20 at 14:38

0

Here the Solution,You have to add a class name to apply css.

<input type="text" class="myclass" value="abcdefghijklmnopqrstuvwxyz" style="width: 
25%; font-size: 25px; margin: 50px;">

The CSS

.myclass{
direction: rtl;
text-align: left;

}

answered Apr 23 '20 at 14:38

Rishab Tyagi

866
1
6
12

This changes the arrow key direction, and also seems to get mixed up when a string starts with `/` – Tim Apr 23 '20 at 14:39
I Understood the problem – Rishab Tyagi Apr 23 '20 at 14:46

Abel Andouard · Answer 4 · 2020-04-23T15:33:55.173

0

Thanks to "Scroll" to the very right of a long text input

With scrollWidth:

<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">

$('input').each(function(){ $(this).scrollLeft($(this)[0].scrollWidth) })

As tim said, dir attribute is not a good solution with caracters '<' '>' '/' '\'

edited Apr 23 '20 at 15:33

answered Apr 23 '20 at 15:06

Abel Andouard

33
4

With the input style the only issue I see is that once you remove focus it scrolls back to the beginning. With rtl the text is right aligned. – Get Off My Lawn Apr 23 '20 at 15:16

How can I cause the text to overflow to the left of my text input?

4 Answers4