Solution 1 by Julian Turner

Discussion in 'Javascript' started by Simon, Jul 27, 2007.

  1. Simon

    Simon Guest

    Julian, you wrote about a possible solution for my problem, it's a way I
    never thought about, it looks perfect.
    But onfortunately, I don't know enough about javascript to convert your
    solution into a piece of programming.
    Could you please help me?
    What are the lines, commands, events, for recognizing no further movements?

    At the bottom of this message is the description of rous solution.

    Thanks,
    Simon

    > I want to know when the carot(cursor) is in the first row of the
    > textarea(although rows do not really exist, i know) and I want to know
    > when
    > the cursor is in the last row of the textarea.
    >
    > Why do I want to know that?
    > Because when the cursor is in the first row and the keycode for "arrow-up"
    > event fires, the focus has to leave the textarea and go to the field above
    > it.
    > Same goes for the last row, when the arrow-down is pressed it has to go to
    > the next field.
    >
    > And when it's in between the first and last line, nothing should happen
    > but
    > goiing up and down the textarea.
    >
    > Thanks,
    > Simon


    Hi

    Two possibilities occurr to me (both non-trivial).

    Firstly, I assume that by "last" row, you are including the fact that
    the textarea might overflow the actual visual box and so scroll, and
    so you are interested in the very end of the text within the textarea.

    Solution 1
    ----------

    One solution might be to test whether the cursor "moved". I.e. if you
    are at the top or bottom of the text within the text area, pressing
    the up or down arrow will produce no further movement. So you could
    capture its previous posiition, compare with the new, and if no
    change, "assume" that you are in the first or last row.
     
    Simon, Jul 27, 2007
    #1
    1. Advertising

  2. On 27 Jul, 09:04, "Simon" <> wrote:
    > Julian, you wrote about a possible solution for my problem, it's a way I
    > never thought about, it looks perfect.
    > But onfortunately, I don't know enough about javascript to convert your
    > solution into a piece of programming.
    > Could you please help me?
    > What are the lines, commands, events, for recognizing no further movements?
    >
    > At the bottom of this message is the description of rous solution.
    >
    > Thanks,
    > Simon


    Hi Simon

    You are in luck. I tried it out myself, out of interest.

    Different browsers have different ways of handling TEXTAREAS and
    cursors, so it is not so easy to write cross-browser code, but not
    impossible.

    The following is a solution for Internet Explorer only, which has its
    "TextRange" and "document.selection" model.

    For Firefox and Opera you need to look-up the "selectionStart" and
    "selectionEnd" properties of the textarea object, and understand how
    "events" are handled slightly differently, but the principles should
    be the same. If I get round to it, I try and make one myself.

    The onclick event is important to capture cursor position when you
    click in the textarea.

    I haven't fully tested the solution in all scenarios.

    <TEXTAREA id=mytext onkeyup=test_keyup() style="FONT-SIZE: 13px;
    WIDTH: 300px; HEIGHT: 100px" onclick=test_click()>Line1
    Line2
    Line3
    Line4</TEXTAREA>

    var lastRange = null;

    function test_click()
    {
    var event = window.event;

    if (document.selection)
    {
    lastRange = document.selection.createRange();
    }
    }

    function test_keyup()
    {
    var event = window.event;

    var keyCode = event.keyCode;

    if (keyCode == 38 && document.selection)
    {
    var range = document.selection.createRange();

    if (lastRange === null)
    {
    lastRange = range;
    }
    else if (lastRange.isEqual(range))
    {
    alert("At top");
    event.returnValue = false;
    }
    else
    {
    lastRange = range;
    }
    }

    if (keyCode == 40 && document.selection)
    {
    var range = document.selection.createRange();

    if (lastRange === null)
    {
    lastRange = range;
    }
    else if (lastRange.isEqual(range))
    {
    alert("At bottom");
    event.returnValue = false;
    }
    else
    {
    lastRange = range;
    }
    }
    }


    Regards

    Julian
     
    Julian Turner, Jul 27, 2007
    #2
    1. Advertising

  3. Simon

    Simon Guest

    This is really great! It works perfectly. Only one question..
    I use your script to tab through the textarea as you know. (With arrows).
    I've changed your alertmessage (at bottom, at top) into a line that sets the
    focus on the next or last field.
    But when the textarea is empty at first..this will always be executed. (So
    when i leave the field above, focus comes into textarea and directly the
    script (at bottom) is executed so it leaves the textarea and goes to the
    next field.
    I use the onkeydown-event.

    Can you adjust your script just a little bit so that when the textarea still
    is empty, the focus stays?
    This is what i have:
    <script language="javascript">
    var lastRange = null;
    function entertab3(ctrl) {
    var event = window.event;
    var keyCode = event.keyCode;
    if (keyCode == 38 && document.selection)
    {
    var range = document.selection.createRange();
    if (lastRange === null)
    {
    lastRange = range;
    }
    else if (lastRange.isEqual(range))
    {
    selectForm.A2.focus();
    event.returnValue = false;
    }
    else
    {
    lastRange = range;
    }
    }
    if (keyCode == 40 && document.selection)
    {
    var range = document.selection.createRange();
    if (lastRange === null)
    {
    lastRange = range;
    }
    else if (lastRange.isEqual(range))
    {
    selectForm.A4.focus();
    event.returnValue = false;
    }
    else
    {
    lastRange = range;
    }
    }
    }
    </script

    Thanks, Simon





    "Julian Turner" <> schreef in bericht
    news:...
    > On 27 Jul, 09:04, "Simon" <> wrote:
    >> Julian, you wrote about a possible solution for my problem, it's a way I
    >> never thought about, it looks perfect.
    >> But onfortunately, I don't know enough about javascript to convert your
    >> solution into a piece of programming.
    >> Could you please help me?
    >> What are the lines, commands, events, for recognizing no further
    >> movements?
    >>
    >> At the bottom of this message is the description of rous solution.
    >>
    >> Thanks,
    >> Simon

    >
    > Hi Simon
    >
    > You are in luck. I tried it out myself, out of interest.
    >
    > Different browsers have different ways of handling TEXTAREAS and
    > cursors, so it is not so easy to write cross-browser code, but not
    > impossible.
    >
    > The following is a solution for Internet Explorer only, which has its
    > "TextRange" and "document.selection" model.
    >
    > For Firefox and Opera you need to look-up the "selectionStart" and
    > "selectionEnd" properties of the textarea object, and understand how
    > "events" are handled slightly differently, but the principles should
    > be the same. If I get round to it, I try and make one myself.
    >
    > The onclick event is important to capture cursor position when you
    > click in the textarea.
    >
    > I haven't fully tested the solution in all scenarios.
    >
    > <TEXTAREA id=mytext onkeyup=test_keyup() style="FONT-SIZE: 13px;
    > WIDTH: 300px; HEIGHT: 100px" onclick=test_click()>Line1
    > Line2
    > Line3
    > Line4</TEXTAREA>
    >
    > var lastRange = null;
    >
    > function test_click()
    > {
    > var event = window.event;
    >
    > if (document.selection)
    > {
    > lastRange = document.selection.createRange();
    > }
    > }
    >
    > function test_keyup()
    > {
    > var event = window.event;
    >
    > var keyCode = event.keyCode;
    >
    > if (keyCode == 38 && document.selection)
    > {
    > var range = document.selection.createRange();
    >
    > if (lastRange === null)
    > {
    > lastRange = range;
    > }
    > else if (lastRange.isEqual(range))
    > {
    > alert("At top");
    > event.returnValue = false;
    > }
    > else
    > {
    > lastRange = range;
    > }
    > }
    >
    > if (keyCode == 40 && document.selection)
    > {
    > var range = document.selection.createRange();
    >
    > if (lastRange === null)
    > {
    > lastRange = range;
    > }
    > else if (lastRange.isEqual(range))
    > {
    > alert("At bottom");
    > event.returnValue = false;
    > }
    > else
    > {
    > lastRange = range;
    > }
    > }
    > }
    >
    >
    > Regards
    >
    > Julian
    >
    >
    >
    >
    >
     
    Simon, Jul 30, 2007
    #3
  4. On 30 Jul, 10:28, "Simon" <> wrote:
    > Can you adjust your script just a little bit so that when the textarea still
    > is empty, the focus stays?


    Glad it works for you.

    I'll try to have a look at this point.

    Regards


    Julian
     
    Julian Turner, Jul 30, 2007
    #4
    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. =?Utf-8?B?UmFqYQ==?=

    Convert Julian Date to VB.NET date

    =?Utf-8?B?UmFqYQ==?=, Nov 12, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    6,016
    =?Utf-8?B?UGF1bA==?=
    Nov 12, 2004
  2. =?Utf-8?B?Q2hyaXMgRGF2b2xp?=

    Gregorian to Julian Date conversion

    =?Utf-8?B?Q2hyaXMgRGF2b2xp?=, Feb 2, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    6,475
    Mark Rae
    Feb 3, 2005
  3. Sam
    Replies:
    1
    Views:
    5,133
    Pete Davis
    Apr 27, 2005
  4. =?ISO-8859-1?Q?Andr=E9_Nobre?=

    Julian Calendar

    =?ISO-8859-1?Q?Andr=E9_Nobre?=, May 9, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    550
    Lucas Tam
    May 9, 2005
  5. Carsten Haese
    Replies:
    2
    Views:
    306
    Carsten Haese
    Apr 4, 2005
Loading...

Share This Page