Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Yet Another Texarea Question (YATQ)

0 views
Skip to first unread message

jackw...@gmail.com

unread,
Aug 2, 2007, 4:45:47 AM8/2/07
to

Hello,

I have a textarea (a very small one). I register a keydown event
listener on the textarea. In the function which handles the event, I
have the following line of code:

self.bc_msg.scrollTop = self.bc_msg.scrollHeight;

This allows the most recent text entered into the textarea to always
be visible. There are issues with using 'self.bc_msg.scrollTop =
self.bc_msg.scrollHeight;', discussed here (http://groups.google.com/
group/comp.lang.javascript/browse_thread/thread/82a8a8ca618b91b1). I
don't understand them fully.

Here's the problem: When a user navigates back through the text
they've entered, they use the arrow keys. This of course triggers the
keydown event, the appropriate function gets called, and the following
line of code is executed: 'self.bc_msg.scrollTop =
self.bc_msg.scrollHeight;'. This means the textarea scrolls to the
bottom as the user is trying to navigate around their previously
entered text.

OK, so I thought I would just detect whether arrow keys were pressed
(inside the event handler), if they were pressed, then I would NOT
execute the code which sets the textarea to display the most recently
entered text. However, if the user proceeds to amend a word, or some
value, then the keydown event will be triggered, and again the
textarea will scroll to the bottom.

Many thanks,

Jack

Randy Webb

unread,
Aug 2, 2007, 5:00:42 AM8/2/07
to
jackw...@gmail.com said the following on 8/2/2007 4:45 AM:

> Hello,
>
> I have a textarea (a very small one).

As opposed to a "very large one"? <g>

> I register a keydown event listener on the textarea.
> In the function which handles the event, I have the
> following line of code:
>
> self.bc_msg.scrollTop = self.bc_msg.scrollHeight;

It would make more sense to do self.bc_msg.scrollTop = cursorPosition;

Search the archives for the methods of determining cursorPosition in a
textarea. Then, you don't have any of the other problems you are
encountering by trying to muck with the cursor/scroll. If trying to keep
the cursor in view is that big an issue, it would seem to make more
sense to resize the textarea to make it large enough to edit and then
reduce it back down. Although it could get irritating as hell watching
textareas grow/shrink.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

jackw...@gmail.com

unread,
Aug 2, 2007, 5:42:18 AM8/2/07
to
On Aug 2, 5:00 am, Randy Webb <HikksNotAtH...@aol.com> wrote:
> jackwoot...@gmail.com said the following on 8/2/2007 4:45 AM:

>
> > Hello,
>
> > I have a textarea (a very small one).
>
> As opposed to a "very large one"? <g>

Exactly :)

>
> > I register a keydown event listener on the textarea.
> > In the function which handles the event, I have the
> > following line of code:
>
> > self.bc_msg.scrollTop = self.bc_msg.scrollHeight;
>
> It would make more sense to do self.bc_msg.scrollTop = cursorPosition;
>
> Search the archives for the methods of determining cursorPosition in a
> textarea. Then, you don't have any of the other problems you are
> encountering by trying to muck with the cursor/scroll. If trying to keep
> the cursor in view is that big an issue, it would seem to make more
> sense to resize the textarea to make it large enough to edit and then
> reduce it back down. Although it could get irritating as hell watching
> textareas grow/shrink.
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
> Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Hello Randy,

I cannot resize the textarea, it is restricted to really quite small
dimensions. Setting the scroll position to the location of the cursor
seems like a brilliant idea. I will try it and post he result in this
thread.

Many thanks,

Jack

jackw...@gmail.com

unread,
Aug 3, 2007, 5:13:10 AM8/3/07
to
On Aug 2, 5:42 am, "jackwoot...@gmail.com" <jackwoot...@gmail.com>
wrote:

It seems this is not quite the correct solution. I have the following
problem. I retrieve the cursor position using the following function:

getCursorPos = function(textareaObj) {
return textareaObj.selectionStart;
}

I then scroll the textarea using the following code:

textarea.scrollTop = getCursorPos(textarea);

The problem is that when I move right or left through previously
entered text, the textarea slowly scrolls downwards or upwards, until
the line with the cursor on is no longer visible.

I then discovered that I could achieve different cursor position
values by navigating through the same text in different ways. For
example pressing the left key once for each character, gave a
different value than holding down the key once for a couple of
seconds, which in turn gave a different value from moving the cursor
directly upwards or downwards.

Then I thought, what has the cursor position got to do with the
textarea scroll position anyway? I mean, unless the cursor position
is measured in a metric which is identical to the metric used for
determining the scroll position of a textarea, then how could this
code ever work?

Hope someone can help.

Thanks,

Jack

jackw...@gmail.com

unread,
Aug 3, 2007, 5:45:21 AM8/3/07
to
On Aug 3, 5:13 am, "jackwoot...@gmail.com" <jackwoot...@gmail.com>

Here is an example of the problem in action:

http://www.acollectionofwork.com/textarea/

1. Write enough text to span 3 or 4 lines.
2. Place the cursor at the start of the textarea.
3. Hold down the right arrow key to move the cursor right.
4. The textarea moves downwards.

Thanks

jackw...@gmail.com

unread,
Aug 3, 2007, 5:47:06 AM8/3/07
to
On Aug 3, 5:45 am, "jackwoot...@gmail.com" <jackwoot...@gmail.com>

I am only programming for Firefox, nothing else.
Just to add, for some reason the example only works in Firefox on
Windows.

jackw...@gmail.com

unread,
Aug 3, 2007, 5:51:44 AM8/3/07
to
On Aug 3, 5:47 am, "jackwoot...@gmail.com" <jackwoot...@gmail.com>

Ignore the last part, the page is now working on Linux and Windows.
However, I am still only concerned with Firefox.

jackw...@gmail.com

unread,
Aug 3, 2007, 5:53:22 AM8/3/07
to
On Aug 3, 5:51 am, "jackwoot...@gmail.com" <jackwoot...@gmail.com>

When I wrote 'working' I didn't mean the problem is solved, just that
the example page demonstrating the problem is now working. :)

0 new messages