"Scroll" to the Very Right of a Long Text Input

Scroll to the very right of a long text input

All browsers except IE6-8/Opera

Set HTMLInputElement.setSelectionRange() to the length of the input value after explicitly setting the focus(). The disadvantage is that it scrolls back to start once blurred.

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);

<input id="foo">  

Make Text Input Scroll Before Reaching the End

Try adding padding to the right of the input box and adjusting width accordingly.

How do I scroll HTML textbox to the end?

Width

Here's for an <input type="text" /> and width.

var ta = document.getElementById('temp');
ta.scrollLeft = ta.scrollWidth;

And my fiddle is updated to show this.

Here's my previous response with doing it for the height.

Height

You can use scrollHeight and scrollTop on an element to do this.

var ta = document.getElementById('temp');
ta.scrollTop = ta.scrollHeight;

Fiddle: http://jsfiddle.net/derekaug/JGqtA/

Showing last part of input text when it is not on focus any more?

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">

focus html in the end of a input text (not only cursor)

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth; 

Automatically scroll multiline TextFormField when it extends the maxLines attribute

This appears to be a missing feature in the Flutter Framework, I've filed a bug to get it resolved: https://github.com/flutter/flutter/issues/9365

TextField with long text, horizontal scroll reset to start - Flutter

You can use ScrollController inside TextField and while textfiled get unfocused jump to start.

class _TOSState extends State<TOS> {
  late final FocusNode textInputFocusNode = FocusNode()
    ..addListener(() {
      debugPrint(textInputFocusNode.hasFocus.toString());
      if (!textInputFocusNode.hasFocus) {
        controller.jumpTo(0);
      }
    });
  ScrollController controller = ScrollController();

  @override
  void dispose() {
    textInputFocusNode.removeListener(() {});
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus();
      },
      child: Column(
        children: [
          TextField(
            scrollController: controller,
            focusNode: textInputFocusNode,
            maxLines: 1,
            decoration: const InputDecoration(
              hintText: "TYpe",
            ),
          ),
        ],
      ),
    ));
  }
}

---

Related Topics