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
Open Url in New Tab or Reuse Existing One Whenever Possible
Set a Callback Function to a New Window in JavaScript
Close a Div by Clicking Outside
How to Get All the Applied Styles of an Element by Just Giving Its Id
Jquery: How to Listen for Dom Changes
Why Aren't Some Technically Serializable Input Properties Serializable
Decoding Url Parameters with JavaScript
How to Format Vuetify Data Table Date Column
How to Mute All Sound in a Page with Js
How to Open a File Browser with Default Directory in JavaScript
Addeventlistener with Ajax Not Working Well
What Is the Meaning of Polyfills in HTML5
What Is the Purpose of the HTML "No-Js" Class
How to Prevent an Http Request Just for a Favicon
What Is the Current State of the Art in HTML Canvas JavaScript Libraries and Frameworks