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

Discussion in 'Javascript' started by Paul Gorodyansky, Feb 3, 2005.

  1. 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, Feb 3, 2005
    #1
    1. Advertising

  2. Paul Gorodyansky, Feb 3, 2005
    #2
    1. Advertising

  3. /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?

    --
    Stanimir
    Stanimir Stamenkov, Feb 3, 2005
    #3
  4. Paul Gorodyansky wrote:

    > 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/default.asp?url=/workshop/author/dhtml/reference/properties/unselectable.asp>

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



    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Feb 3, 2005
    #4
  5. Stanimir Stamenkov wrote:
    >
    > /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?


    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, Feb 3, 2005
    #5
  6. 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, Feb 3, 2005
    #6
  7. 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
    Paul Gorodyansky, Feb 4, 2005
    #7
  8. 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.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Feb 6, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. torch
    Replies:
    3
    Views:
    123
    Thomas 'PointedEars' Lahn
    Jun 20, 2004
  2. vasu
    Replies:
    0
    Views:
    104
  3. R. Kangas
    Replies:
    0
    Views:
    172
    R. Kangas
    Jan 26, 2006
  4. Csaba  Gabor

    Textarea challenge: caret pos, resultant text

    Csaba Gabor, Apr 4, 2006, in forum: Javascript
    Replies:
    0
    Views:
    82
    Csaba Gabor
    Apr 4, 2006
  5. Replies:
    1
    Views:
    117
Loading...

Share This Page