Question

41

How do you scroll to the position of the cursor in a textarea?

rated 0 times [ 45] [ 4] / answers: 1 / hits: 22651 / 9 Years ago, mon, april 27, 2015, 12:00:00

HTML

<textarea rows='5'>

sdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadj

</textarea>



<br />

<button id='scroll-to-cursor'>Scroll to Cursor</button>

JavaScript

$('#scroll-to-cursor').on('click', function() {

    // ?

});

Desired Outcome

Click somewhere in the textarea to place cursor.

Scroll away so cursor isn't visible.

Click Scroll to Cursor button.

Textarea scrolls to the position of the cursor

Note: I'm using jQuery.

The only way I could figure out how to scroll is to use jQuery's scrollTop
function. It sets the scroll position to the number of pixels that are hidden from view above the scrollable area.

I've diagrammed the problem below. Passing in the length of that red line (in pixels) to scrollTop should do the trick. But I can't figure out how to get the length of the line.

enter

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jocelyntrishar · Accepted Answer

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.