Yet Another Texarea Question (YATQ)

J

jackwootton

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
 
J

jackwootton

(e-mail address removed) said the following on 8/2/2007 4:45 AM:



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

Exactly :)
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
 
J

jackwootton

Exactly :)









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

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
 
J

jackwootton

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

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
 
J

jackwootton

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

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

jackwootton

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

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

jackwootton

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

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top