1

In the case of input whenever we focus out or click outside the input field we see that the right part of the over text is hidden and only the left part shows but I want the reverse of it.

<input value="abcdefghijklmnopqrstwxyz123456789">

Like in the above input field we can see "abcdefghijklmnopqrstwxyz1" and the rest part("23456789") is hidden but I want to show "klmnopqrstwxyz123456789" (last part instead of the first part) and hide the first part "abcdefghij" without CSS direction.

SSKhekhaliya
  • 37
  • 1
  • 3
  • Does this answer your question? ["Scroll" to the very right of a long text input](https://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input) – aerial Nov 18 '21 at 11:10
  • *.....without CSS direction*......why? – Mamun Nov 18 '21 at 11:13
  • @Mamun Because whenever I add symbols like + or ".". it starts showing them at the very first place when the text-direction is right. Like if I will text "45+" then it will show "+46" – SSKhekhaliya Nov 18 '21 at 11:15
  • 1
    @SSKhekhaliya, Does this solve your issue? https://codepen.io/Maniraj_Murugan/pen/bGrzWBe – Maniraj Murugan Nov 18 '21 at 11:20
  • @ManirajMurugan yeah, this is exactly what I wanted, thank you so much. – SSKhekhaliya Nov 18 '21 at 11:24

2 Answers2

1

Via javascript, we can achieve it with the help of blur event.

On blur, we capture the input's current Element.scrollLeft . Next, we reset the scrollLeft position to Element.scrollWidth wrapped in a setTimeout() to ensure the browser waits to render the queued change.

const elem = document.getElementById('data');

elem.addEventListener("blur", () => {
  setTimeout(() => {
    elem.scrollLeft = elem.scrollWidth;
  }, 0);
});
<input id="data" value="abcdefghijklmnopqrstwxyz123456789">
Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
0

Below piece of code - for dynamically change the length of your text on changing the content

function a (t){
    t.size = t.value.length
    console.log(t)
}

<input onkeyup="a(this)" value="abcdefghijklmnopqrstwxyz123456789">
Aghil Varghese
  • 360
  • 1
  • 10