How do you scroll to the position of the cursor in a textarea?
From Jonathan Levine's comment, I realized that this answer works for me.
Fiddle Demo
JavaScript
$('#scroll-to-cursor').on('click', function() {
$('textarea').focus();
$.event.trigger({ type : 'keypress' }); // works cross-browser
// new KeyboardEvent('keypress'); // doesn't work in IE and Safari
/* var evt = document.createEvent('KeyboardEvent');
evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32);
$textarea.dispatchEvent(evt);
evt = document.createEvent('KeyboardEvent');
evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0);
$textarea.dispatchEvent(evt); */
});
/*
To test:
1) Click somewhere in the textarea to place cursor
2) Scroll away so cursor isn't visible
3) Click "Scroll to Cursor" button
*/
Explanation
When the user presses a key, the browser does two things:
- Places the key in the position after the cursor.
- Scrolls to that position.
This solution just simulates that (without actually entering any text).
Edit: The old solution isn't standards compliant. initKeyEvent
is deprecated. The update only uses the KeyboardEvent()
constructor, which is compliant and works in all browsers except IE (Safari is a question mark).
Edit 2: Using $.event.trigger({ type : 'keypress' });
instead of new KeyboardEvent()
works just as well, and works in all browsers.
textarea.blur()
textarea.focus()
Does the job.
Example: https://jsfiddle.net/syy25x69/
To select a text in IE see: Set textarea selection in Internet Explorer
Update
In order for this to work, I noticed that the selection must be collapsed. You can restore the selection later if you need to.
// collapse selection here
textarea.blur()
textarea.focus() // this scrolls the textarea
// expand selection here
Another example: https://jsfiddle.net/rk8cL174/
For some weird reason, Chrome only scrolls when there is a caret on the textbox, not when a selection is active, so if you need to scroll to a selection, do this little hack:
// set the single caret first
textarea.setSelectionRange(index, index);
// focus the textarea box so the scroll happens
textarea.focus();
// now do the selection
textarea.setSelectionRange(index, index + x);