Problem with Textarea - Mozilla
Paul Gorodyansky
FAQ tells how to insert (or replace0 a text at a caret position in
Mozilla (and same works for Opera 8+), for example, at
http://www.faqts.com/knowledge_base/view.phtml/aid/1661
it talks about that -
...
textControl.setSelectionRange(oldSelectionStart + newText.length,
oldSelectionStart + newText.length);
But this has a problem - if my Textarea is say 10 lines long
and is _full_ and I am trying to insert - programmatically -
some text down below, say in line #12:
I can NOT see what my Javascript code inserts -
the above cited textControl.setSelectionRange()
sets the screen to the very beginning of my Textarea, to the line #1,
so line #12 content goes out of sight...
Is it solvable? May be I can somehow set a focus onto current
caret position, i.e. make line #12 visible after the
insertion/replacement?
Thanks,
Paul
Paul Gorodyansky
May be one of the auhtors of that entry of the FAQ?
--
Regards,
Paul
Randy Webb
> Any one?
Anyone what? Quote what you are replying to and that becomes a moot issue.
> May be one of the auhtors of that entry of the FAQ?
What FAQ? The c.l.j FAQ? The c.i.w.a.s FAQ? The
Humpty-Dumpty-Fell-Off-The-Wall FAQ?
If you want the cursor at the end of the textarea, try grabbing the
textarea's value, set it to '' to clear it, then set it back to what it
was....
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Paul Gorodyansky
Randy Webb wrote:
>
> Anyone what? Quote what you are replying to and that becomes a moot issue.
Why 'moot'? It's easily reproducible - just using the examples
on the page I mentioned -
http://www.faqts.com/knowledge_base/view.phtml/aid/1661
>
> > May be one of the auhtors of that entry of the FAQ?
>
> What FAQ? The c.l.j FAQ? The c.i.w.a.s FAQ? The
> Humpty-Dumpty-Fell-Off-The-Wall FAQ?
No, I did specify which FAQ -
http://www.faqts.com/knowledge_base/view.phtml/aid/1661
>
> If you want the cursor at the end of the textarea, try grabbing the
> textarea's value, set it to '' to clear it, then set it back to what it
> was....
No, the cursor (and caret) _is_ at the end of the text area
(or at the place where we insert some text), the problem is
that we can NOT see it - again, easy to see on any example
of
http://www.faqts.com/knowledge_base/view.phtml/aid/1661
if TEXTAREA is used...
--
Regards,
Paul
Paul Gorodyansky
Here is the code of
http://www.faqts.com/knowledge_base/view.phtml/aid/1661 -
with TEXTAREA of 3 lines long, so it's EASY to see that
lines after #3 have hte problem I explained - everything works OK,
but in Mozilla/Firefox we can not see that:
http://www.geocities.com/paulgor1/js.htm
--
Regards,
Paul
Randy Webb
> Hi,
>
> Randy Webb wrote:
>
>>Anyone what? Quote what you are replying to and that becomes a moot issue.
>
>
> Why 'moot'? It's easily reproducible - just using the examples
> on the page I mentioned -
> http://www.faqts.com/knowledge_base/view.phtml/aid/1661
>
In the post I replied to, there is no reference to *any* FAQ. I suggest
you re-read your post that I replied to.
>>>May be one of the auhtors of that entry of the FAQ?
>>
>>What FAQ? The c.l.j FAQ? The c.i.w.a.s FAQ? The
>>Humpty-Dumpty-Fell-Off-The-Wall FAQ?
>
>
> No, I did specify which FAQ -
> http://www.faqts.com/knowledge_base/view.phtml/aid/1661
In the post I replied to, there is no reference to *any* FAQ. I suggest
you re-read your post that I replied to.
>
>>If you want the cursor at the end of the textarea, try grabbing the
>>textarea's value, set it to '' to clear it, then set it back to what it
>>was....
>
>
> No, the cursor (and caret) _is_ at the end of the text area
> (or at the place where we insert some text), the problem is
> that we can NOT see it - again, easy to see on any example
> of
> http://www.faqts.com/knowledge_base/view.phtml/aid/1661
> if TEXTAREA is used...
See how easy that was? You quoted what you were replying to, and it all
makes sense now. Well, not really but it almost does.
I won't even ask why you think you need to do that onKeyUp, you simply
set an onChange that will convert the entire textarea's content to upper
case.
Paul Gorodyansky
>
>
> I won't even ask why you think you need to do that onKeyUp, you simply
> set an onChange that will convert the entire textarea's content to upper
> case.
Some other examples on
http://www.faqts.com/knowledge_base/view.phtml/aid/1661
answer that - for example they have an example when a user types
German accented letters on a regular German keyboard, but what goes
to the screen is another representation of such as letter -
different for different letters.
That is, the whole point is to be able to send to screen what
we want when a user presses a keyboard key...
Anyway, I made a small test page for my question - easy to see
what the issue is:
Here is the code of
http://www.faqts.com/knowledge_base/view.phtml/aid/1661 -
with TEXTAREA of 3 lines long, so it's EASY to see that
lines after #3 have the problem I explained - everything works OK,
replacement goes as designed, but in Mozilla/Firefox we can
not see that, it's out of sight:
Paul Gorodyansky
so here is the full set:
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/28daf01f9dd64dba/ec14e34bffb016f9?hl=en#ec14e34bffb016f9
--
Regards,
Paul
Martin Honnen
Paul Gorodyansky wrote:
> Here is the code of
> http://www.faqts.com/knowledge_base/view.phtml/aid/1661 -
> with TEXTAREA of 3 lines long, so it's EASY to see that
> lines after #3 have the problem I explained - everything works OK,
> replacement goes as designed, but in Mozilla/Firefox we can
> not see that, it's out of sight:
>
> http://www.geocities.com/paulgor1/js.htm
The code simply uses the setSelectionRange API that Mozilla exposes for
text controls, in your test case it looks as if that function correctly
places the caret in the textarea but the textarea is not scrolled to the
line where the caret is set.
It is not easy to correct from the JavaScript code itself as obviously
what you want to happen is that setSelectionRange, a native function
implemented in Mozilla, itself scrolls to the line where the caret is.
In Mozilla it is possible to scroll textareas by setting
textarea.scrollTop
so if you want to fix that with JavaScript you would need to scroll to
the intended line by setting textarea.scrollTop as needed.
As a start I would try to change
textControl.value =
textControl.value.substring(0, oldSelectionStart) +
newText +
textControl.value.substring(oldSelectionEnd);
textControl.setSelectionRange(oldSelectionStart + newText.length,
oldSelectionStart + newText.length);
to
var scrollTop, scrollLeft;
if (textControl.type == 'textarea' && typeof textControl.scrollTop !=
'undefined') {
scrollTop = textControl.scrollTop;
scrollLeft = textControl.scrollLeft;
}
textControl.value =
textControl.value.substring(0, oldSelectionStart) +
newText +
textControl.value.substring(oldSelectionEnd);
if (typeof scrollTop != 'undefined') {
textControl.scrollTop = scrollTop;
textControl.scrollLeft = scrollLeft;
}
textControl.setSelectionRange(oldSelectionStart + newText.length,
oldSelectionStart + newText.length);
That simply tries to store the current scroll position before the value
is changed (which makes the textarea lose its scroll position in
Mozilla), then changes the value as before, then tries to restore the
scroll positions and then sets the caret as before.
Try whether that helps and report back.
--
Martin Honnen
http://JavaScript.FAQTs.com/
Paul Gorodyansky
Martin Honnen wrote:
> ...
>
> Try whether that helps and report back.
>
Thanks, Martin, it works Ok now, I created test file 1:
http://www.geocities.com/paulgor1/js1.htm
By the way, just FYI - Opera 8 - which uses successfully
the same code as Mozilla for such things
(in my own code I have if (Opera) Br == "NN"; // same as Mozilla)
did not have such problem, that is, it worked Ok even
before the fix you suggested...
--
Regards,
Paul