keeping focus on a text field

Discussion in 'Javascript' started by laredotornado@zipmail.com, May 29, 2006.

  1. Guest

    Hello, Assuming I have the functions, "isNumber" and "isEmpty", how
    would I write the HTML INPUT type="text" element such that a person
    cannot exit the element unless they have typed in a valid number (as
    defined by the function isNumber) or left the field empty (as defined
    by isEmpty)? Thus, if they have typed in "aaa" and then pressed "Tab"
    to go the next element, they'd get a warning message, and be returned
    to the old element?

    Ideally, this solution would work for both the latest versions of
    Firefox and IE.

    Thanks, - Dave
    , May 29, 2006
    #1
    1. Advertising

  2. deadlyicon Guest

    Ok step one: Keeping someone focused on a text field.

    You would this it would be this simple:

    <input type="text" onBlur="this.focus();">

    but its not, but this works

    <input type="text" onBlur=" var that = this; setTimeout(function()
    {that.focus();}, 5); ">

    seems to work pretty well;

    as for your function that checks the input's value it might look
    something like this

    <input type="text" onBlur="checkMe(this);">

    <script>
    function checkMe (me) {
    if (me.value != 12) {
    alert ('ERROR you must enter 12!');
    me.focus();
    }
    }
    </script>
    deadlyicon, May 29, 2006
    #2
    1. Advertising

  3. Randy Webb Guest

    said the following on 5/28/2006 8:18 PM:
    > Hello, Assuming I have the functions, "isNumber" and "isEmpty",


    I think your isEmpty function would be redundant in this case. If it is
    empty, then it can't be a number and isNumber would cover it.


    > how would I write the HTML INPUT type="text" element such that a person
    > cannot exit the element unless they have typed in a valid number (as
    > defined by the function isNumber) or left the field empty (as defined
    > by isEmpty)?


    You use the onSubmit of the form to validate the entire form and notify
    of errors then.

    <input type="text" onchange="isNumber(this)">

    function isNumber(fieldToValidate)
    {
    //check fieldToValidate.value to see if it
    //is a Number or not (whatever you define "Number"
    //to be.
    if (!validNumber)
    {
    alert('This is a poorly implemented way to ' +
    'keep you from going anywhere else ' +
    'because I do not know better');
    fieldToValidate.focus();
    }
    }

    If you doubt the alert message, use the tab key and tab through your
    form elements.

    > Thus, if they have typed in "aaa" and then pressed "Tab"
    > to go the next element, they'd get a warning message, and be returned
    > to the old element?


    See above. But do not fall for the trap of using onblur, use the
    onchange event handler.

    > Ideally, this solution would work for both the latest versions of
    > Firefox and IE.


    And what about Opera, KMeleon, Camino or any other browser? The point
    being, don't fall into the "two browser" trap where you think there are
    only two browsers to consider.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #3
  4. Randy Webb Guest

    deadlyicon said the following on 5/29/2006 12:08 AM:

    Please quote what you are replying to.

    If you want to post a followup via groups.google.com, don't use the
    "Reply" link at the bottom of the article. Click on "show options" at
    the top of the article, then click on the "Reply" at the bottom of the
    article headers.
    <URL: http://www.safalra.com/special/googlegroupsreply/ >

    > Ok step one: Keeping someone focused on a text field.


    That's annoying at best and anti-user friendly at worse.

    > You would this it would be this simple:
    >
    > <input type="text" onBlur="this.focus();">


    Never use the onblur to validate a field. Use the onchange instead.

    > but its not, but this works
    >
    > <input type="text" onBlur=" var that = this; setTimeout(function()
    > {that.focus();}, 5); ">
    >
    > seems to work pretty well;


    Depending on your definition of "work pretty well"

    > as for your function that checks the input's value it might look
    > something like this
    >
    > <input type="text" onBlur="checkMe(this);">


    <input type="text" onchange="checkMe(this)">

    > <script>
    > function checkMe (me) {
    > if (me.value != 12) {
    > alert ('ERROR you must enter 12!');
    > me.focus();
    > }
    > }
    > </script>


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #4
  5. Guest

    Unfortunately, neither "onChange" nor "onBlur" work. Although the
    function gets called, if you clic "Tab" the focus changes to the next
    text field even if you have some "focus" statement in your function.

    - Dave
    , May 30, 2006
    #5
  6. JRS: In article <>, dated Mon, 29 May
    2006 00:30:29 remote, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    > said the following on 5/28/2006 8:18 PM:
    >> Hello, Assuming I have the functions, "isNumber" and "isEmpty",

    >
    >I think your isEmpty function would be redundant in this case. If it is
    >empty, then it can't be a number and isNumber would cover it.
    >


    (A) It would be good practice to use, rather than isEmpty, isBlank, the
    latter implying visibly empty.

    I was startled, once, by the strange report given by a Web page
    checker - it turned out (a) that in copy'n'pasteing the URL I'd
    transferred a trailing space, (b) which was not trimmed, (c) but
    included in the URL requested, (d) which generated a 404 page,
    (e) which was tested, (f) and (IIRC) failed to validate.


    (B) But AFAIK isNumber is not standard.

    It could be implemented with, say, /[+-]?\d+/, in which case Empty or
    Blank would fail; but it could be implemented as

    function isNumber(X) { return !isNaN(+X) }

    which counts Blank as zero.


    One cannot safely assume much about the behaviour of an OP's unquoted
    code; and it might be considered useful in some cases for Blank to be
    treated as zero..

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, May 30, 2006
    #6
  7. Randy Webb Guest

    said the following on 5/30/2006 10:59 AM:
    > Unfortunately, neither "onChange" nor "onBlur" work.


    And unfortunately, you haven't learned how to quote what you are
    replying to. So here it is, once again:

    Please quote what you are replying to.

    If you want to post a followup via groups.google.com, don't use the
    "Reply" link at the bottom of the article. Click on "show options" at
    the top of the article, then click on the "Reply" at the bottom of the
    article headers.

    <URL: http://www.safalra.com/special/googlegroupsreply/ >

    But yes, onchange and onblur do work as intended.

    > Although the function gets called, if you clic "Tab" the focus
    > changes to the next text field even if you have some "focus"
    > statement in your function.


    Then show your code because something else in your code is wrong, not in
    the basic idea of how to do what you are wanting to do.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 30, 2006
    #7
    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. harry
    Replies:
    1
    Views:
    541
    brucie
    Apr 8, 2004
  2. Bazza Formez
    Replies:
    2
    Views:
    917
    Bazza Formez
    Aug 6, 2007
  3. William McBrine
    Replies:
    0
    Views:
    298
    William McBrine
    May 28, 2008
  4. Josh Grameson

    Keeping Cells from getting Focus?

    Josh Grameson, May 9, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    97
    Eliyahu Goldin
    May 9, 2006
  5. Roger
    Replies:
    3
    Views:
    310
Loading...

Share This Page