Insert a string into the text of textarea. Caret? IE question

[Paul Gorodyansky]

Hi,

Say I have a text in my TEXTAREA box - 01234567890
I want - using script - insert say "abc" in the middle.

Works almost OK in Internet Explorer (with one problem) based on their
example at
http://msdn.microsoft.com/library/en-us/dnwebteam/html/webteam12032001.asp
in the chapter "O Cursor, Where Art Thou".

Here is what happens (I use caretPos.text = "abc":

1. If no text is selected - no problem, my "abc" got inserted say
after '2' AND I see a Caret (vertical bar) after it

2. But if - with the same code - I _select_ say "56" and want to
override it with "abc", then yes, "56" got replaced with "abc",
BUT there is no Caret symbol on screen, no vertical bar!


Is it solvable?

You can see the code working by typing say 0123456789, selecting
several digits and then clicking with a mouse on any
letter of a keyboard image:
http://RusWin.net/screen_e.htm

(in that specific mouse-driven mode a replacement is one symbol, but
in other modes it's not the case, the replacement could be a _string_)

The script piece is below.

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

========== Script piece

// elem is a TEXTAREA object
function getCaretPos(elem, newString)
{

if ( elem.isTextEdit )
{
if ( !elem.caretPos )
saveCaret(elem);

var caretPos = elem.caretPos;
caretPos.text = newString;
}
}

function saveCaret(elem)
{
if ( elem.isTextEdit )
elem.caretPos = document.selection.createRange();
}


// HTML piece:
<textarea name='message' ONSELECT='saveCaret(this)'
ONCLICK='saveCaret(this)' ONKEYUP='saveCaret(this)'
</textarea>

 

[Paul Gorodyansky]

Example similar to MS' one is here -
http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
and I used it, too - to keep track of cursor position....

But that example shows the same issue - no Caret symbol (bar) after
the operation.

 

[Stanimir Stamenkov]

/Paul Gorodyansky/:

Example similar to MS' one is here -
http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
and I used it, too - to keep track of cursor position....

But that example shows the same issue - no Caret symbol (bar) after
the operation.

You're clearly taking the focus away from the text area pushing the
button - what's the problem here?

How do you intend to activate the insertion? If you're going to do
it the same way - user pushing a button, and you still want
returning the focus to the area you could add:

textEl.focus();

at the end of the 'insertAtCaret()' function, for example. Focus
issues could be tricky and it greatly depends on your functional
requirements - what should happen when the text area doesn't have
the focus and one pushes the button?

 

[Martin Honnen]

Example similar to MS' one is here -
http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
and I used it, too - to keep track of cursor position....

But that example shows the same issue - no Caret symbol (bar) after
the operation.

Well it is only about insertion at the caret, if you want to have the
caret in there then I would try with calling

function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
caretPos.select();
}

If that doesn't help then at least for IE 5.5/6 on Windows MS has
introduced an attribute named unselectable for buttons so that you can
click them without taking focus away/changing a selection thus if you use
<input type="button"
unselectable="on"
with your buttons then there should be a problem with the button
interfering with the selection in a text control.
Docs are here:
<http://msdn.microsoft.com/library/d...r/dhtml/reference/properties/unselectable.asp>

See also
<http://www.faqts.com/knowledge_base/view.phtml/aid/13562/fid/130>

 

[Paul Gorodyansky]

/Paul Gorodyansky/:


You're clearly taking the focus away from the text area pushing the
button - what's the problem here?

No, it's just an example - in my case often there is NO button, no
"taking focus away", for example, in "To Latin" mode:

a) No selection
- I place cursor in the middle of the text - see Caret bar
- I press a letter on my physical keyboard (say, Cyrillic letter
that looks like mirrored 'R')
- in the script, I replace that letter with 2 latin letters 'ya'
and do caretPos.text =
- on screen, 'ya' is inserted and Caret (bar) is after that insertion

b) When I selected some text and want to replace it:
- I place cursor in the middle of the text - see Caret bar
- I select several symbols
then - same as in (a):
- I press a letter on my physical keyboard (say, Cyrillic letter
that looks like mirrored 'R')
- in the script, I replace that letter with 2 latin letters 'ya'
and do caretPos.text =
- on screen, the selected tex is replaced with 'ya' BUT there is
*no* Caret (bar) anymore.


Let me try Martin's function.


--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Paul Gorodyansky]

Thanks, Martin,

Yes, it solves the problem - I mean adding caretPos.select();
after assigning the new text - now even when I select say 3 symbols
and programmatically replace it with my string, I see Caret (bar) after
my string!

It's really useful to have a Caret (bar) visible - may be a user
wants to insert more - and now s/he sees _where_.

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Paul Gorodyansky]

Hi,

I added 'default' method for browsers that, unlike IE and Mozilla,
do not let me - using script - position a caret and insert/replace text
there (Opera, Safari, etc.), so it's just got added to the very end of
the text in TEXTAREA:

textControl.value += newString;

So it works fine say in Opera but bad thing is that Caret (bar) is not
moving (obviously).

Is it possible - in Opera - to position a Caret (bar) at the end of the
text?



--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net

 

[Martin Honnen]

Paul Gorodyansky wrote:

Is it possible - in Opera - to position a Caret (bar) at the end of the
text?

I don't think that is possible in a HTML control in Opera currently, at
least there is no API. Some browsers when you set control.value however
move the caret, some to the beginning, some to the end of text in the
text control.
And there are Java text controls you could embed with a Java applet
which probably then allow you more control over the caret.