Persistent Space Character in an Input Text Field

Discussion in 'Javascript' started by kvnsmnsn@hotmail.com, Feb 27, 2007.

  1. Guest

    I've written the following Javascript file that includes an input text
    field and an output text field, the latter of which is initialized to
    zero. Each time the user enters a number in the input field and hits
    the space bar, that number gets added to the value in the output field
    and then the input field gets set to the empty string. The user can
    enter as many numbers into the input field as s/he wants.

    The problem I have with this is that even though I do set "sbInput" to
    the empty string, somehow a space character ends up in it, so that if
    I just type the number "123" into it, what actually ends up is " 123".
    This doesn't affect the correct running of the web page, since a space
    character doesn't change the numeric value of that field, but it's a
    nuisance that I'd like to get rid of. Does anybody know how I can get
    rid of this extra space character printing? Any information on this
    would be appreciated.

    ---Kevin Simonson

    "You'll never get to heaven, or even to LA,
    if you don't believe there's a way."
    from _Why Not_

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Space Bug</title>
    <script language="javascript">

    function keyCheck ( evnt)
    {
    var theKey;
    var sbIn = document.getElementById( "sbInput");
    var sbOut = document.getElementById( "sbOutput");
    if (!evnt)
    { evnt = window.event;
    }
    if (evnt.keyCode)
    { theKey = evnt.keyCode;
    }
    else if (evnt.which)
    { theKey = evnt.which
    }
    if (theKey == 32)
    { if (evnt.keyCode)
    { evnt.cancelBubble = true;
    }
    sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    sbIn.value = "";
    }
    }

    </script>
    </head>
    <body>
    <form name="sbForm">
    <input type="text" name="sbInput" id="sbInput" size="5"
    onkeypress="keyCheck( event);" />
    <input type="text" name="sbOutput" id="sbOutput" size="5"
    readonly="readonly" value="0" />
    </form>
    </body>
    </html>
     
    , Feb 27, 2007
    #1
    1. Advertising

  2. Tom Cole Guest

    On Feb 27, 1:38 pm, wrote:
    > I've written the following Javascript file that includes an input text
    > field and an output text field, the latter of which is initialized to
    > zero. Each time the user enters a number in the input field and hits
    > the space bar, that number gets added to the value in the output field
    > and then the input field gets set to the empty string. The user can
    > enter as many numbers into the input field as s/he wants.
    >
    > The problem I have with this is that even though I do set "sbInput" to
    > the empty string, somehow a space character ends up in it, so that if
    > I just type the number "123" into it, what actually ends up is " 123".
    > This doesn't affect the correct running of the web page, since a space
    > character doesn't change the numeric value of that field, but it's a
    > nuisance that I'd like to get rid of. Does anybody know how I can get
    > rid of this extra space character printing? Any information on this
    > would be appreciated.
    >
    > ---Kevin Simonson
    >
    > "You'll never get to heaven, or even to LA,
    > if you don't believe there's a way."
    > from _Why Not_
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-
    > transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <title>Space Bug</title>
    > <script language="javascript">
    >
    > function keyCheck ( evnt)
    > {
    > var theKey;
    > var sbIn = document.getElementById( "sbInput");
    > var sbOut = document.getElementById( "sbOutput");
    > if (!evnt)
    > { evnt = window.event;
    > }
    > if (evnt.keyCode)
    > { theKey = evnt.keyCode;
    > }
    > else if (evnt.which)
    > { theKey = evnt.which
    > }
    > if (theKey == 32)
    > { if (evnt.keyCode)
    > { evnt.cancelBubble = true;
    > }
    > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > sbIn.value = "";
    > }
    > }
    >
    > </script>
    > </head>
    > <body>
    > <form name="sbForm">
    > <input type="text" name="sbInput" id="sbInput" size="5"
    > onkeypress="keyCheck( event);" />
    > <input type="text" name="sbOutput" id="sbOutput" size="5"
    > readonly="readonly" value="0" />
    > </form>
    > </body>
    > </html>


    Try something like this. Have your method return false if a space is
    detected or true otherwise:

    if (theKey == 32)
    > { if (evnt.keyCode)
    > { evnt.cancelBubble = true;
    > }
    > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > sbIn.value = "";

    return false;
    > }

    return true;


    Then change your event handler to:

    <input type="text" name="sbInput" id="sbInput" size="5"
    > onkeypress="return keyCheck( event);" />


    That should do it.
     
    Tom Cole, Feb 27, 2007
    #2
    1. Advertising

  3. shimmyshack Guest

    On 27 Feb, 19:03, "Tom Cole" <> wrote:
    > On Feb 27, 1:38 pm, wrote:
    >
    >
    >
    > > I've written the following Javascript file that includes an input text
    > > field and an output text field, the latter of which is initialized to
    > > zero. Each time the user enters a number in the input field and hits
    > > the space bar, that number gets added to the value in the output field
    > > and then the input field gets set to the empty string. The user can
    > > enter as many numbers into the input field as s/he wants.

    >
    > > The problem I have with this is that even though I do set "sbInput" to
    > > the empty string, somehow a space character ends up in it, so that if
    > > I just type the number "123" into it, what actually ends up is " 123".
    > > This doesn't affect the correct running of the web page, since a space
    > > character doesn't change the numeric value of that field, but it's a
    > > nuisance that I'd like to get rid of. Does anybody know how I can get
    > > rid of this extra space character printing? Any information on this
    > > would be appreciated.

    >
    > > ---Kevin Simonson

    >
    > > "You'll never get to heaven, or even to LA,
    > > if you don't believe there's a way."
    > > from _Why Not_

    >
    > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > > "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-
    > > transitional.dtd">
    > > <html xmlns="http://www.w3.org/1999/xhtml">
    > > <head>
    > > <title>Space Bug</title>
    > > <script language="javascript">

    >
    > > function keyCheck ( evnt)
    > > {
    > > var theKey;
    > > var sbIn = document.getElementById( "sbInput");
    > > var sbOut = document.getElementById( "sbOutput");
    > > if (!evnt)
    > > { evnt = window.event;
    > > }
    > > if (evnt.keyCode)
    > > { theKey = evnt.keyCode;
    > > }
    > > else if (evnt.which)
    > > { theKey = evnt.which
    > > }
    > > if (theKey == 32)
    > > { if (evnt.keyCode)
    > > { evnt.cancelBubble = true;
    > > }
    > > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > > sbIn.value = "";
    > > }
    > > }

    >
    > > </script>
    > > </head>
    > > <body>
    > > <form name="sbForm">
    > > <input type="text" name="sbInput" id="sbInput" size="5"
    > > onkeypress="keyCheck( event);" />
    > > <input type="text" name="sbOutput" id="sbOutput" size="5"
    > > readonly="readonly" value="0" />
    > > </form>
    > > </body>
    > > </html>

    >
    > Try something like this. Have your method return false if a space is
    > detected or true otherwise:
    >
    > if (theKey == 32)> { if (evnt.keyCode)
    > > { evnt.cancelBubble = true;
    > > }
    > > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > > sbIn.value = "";

    >
    > return false;> }
    >
    > return true;
    >
    > Then change your event handler to:
    >
    > <input type="text" name="sbInput" id="sbInput" size="5"
    >
    > > onkeypress="return keyCheck( event);" />

    >
    > That should do it.


    onkeypress, the character gets input after function call; if you use
    onkeyup, it shouldn't, did u decide against onkeyup?
     
    shimmyshack, Feb 27, 2007
    #3
  4. Guest

    On Feb 27, 12:13 pm, "shimmyshack" <> wrote:
    > On 27 Feb, 19:03, "Tom Cole" <> wrote:
    >
    >
    >
    > > On Feb 27, 1:38 pm, wrote:

    >
    > > > I've written the following Javascript file that includes an input text
    > > > field and an output text field, the latter of which is initialized to
    > > > zero. Each time the user enters a number in the input field and hits
    > > > the space bar, that number gets added to the value in the output field
    > > > and then the input field gets set to the empty string. The user can
    > > > enter as many numbers into the input field as s/he wants.

    >
    > > > The problem I have with this is that even though I do set "sbInput" to
    > > > the empty string, somehow a space character ends up in it, so that if
    > > > I just type the number "123" into it, what actually ends up is " 123".
    > > > This doesn't affect the correct running of the web page, since a space
    > > > character doesn't change the numeric value of that field, but it's a
    > > > nuisance that I'd like to get rid of. Does anybody know how I can get
    > > > rid of this extra space character printing? Any information on this
    > > > would be appreciated.

    >
    > > > ---Kevin Simonson

    >
    > > > "You'll never get to heaven, or even to LA,
    > > > if you don't believe there's a way."
    > > > from _Why Not_

    >
    > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > > > "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-
    > > > transitional.dtd">
    > > > <html xmlns="http://www.w3.org/1999/xhtml">
    > > > <head>
    > > > <title>Space Bug</title>
    > > > <script language="javascript">

    >
    > > > function keyCheck ( evnt)
    > > > {
    > > > var theKey;
    > > > var sbIn = document.getElementById( "sbInput");
    > > > var sbOut = document.getElementById( "sbOutput");
    > > > if (!evnt)
    > > > { evnt = window.event;
    > > > }
    > > > if (evnt.keyCode)
    > > > { theKey = evnt.keyCode;
    > > > }
    > > > else if (evnt.which)
    > > > { theKey = evnt.which
    > > > }
    > > > if (theKey == 32)
    > > > { if (evnt.keyCode)
    > > > { evnt.cancelBubble = true;
    > > > }
    > > > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > > > sbIn.value = "";
    > > > }
    > > > }

    >
    > > > </script>
    > > > </head>
    > > > <body>
    > > > <form name="sbForm">
    > > > <input type="text" name="sbInput" id="sbInput" size="5"
    > > > onkeypress="keyCheck( event);" />
    > > > <input type="text" name="sbOutput" id="sbOutput" size="5"
    > > > readonly="readonly" value="0" />
    > > > </form>
    > > > </body>
    > > > </html>

    >
    > > Try something like this. Have your method return false if a space is
    > > detected or true otherwise:

    >
    > > if (theKey == 32)> { if (evnt.keyCode)
    > > > { evnt.cancelBubble = true;
    > > > }
    > > > sbOut.value = Number( sbOut.value) + Number( sbIn.value);
    > > > sbIn.value = "";

    >
    > > return false;> }

    >
    > > return true;

    >
    > > Then change your event handler to:

    >
    > > <input type="text" name="sbInput" id="sbInput" size="5"

    >
    > > > onkeypress="return keyCheck( event);" />

    >
    > > That should do it.

    >
    > onkeypress, the character gets input after function call; if you use
    > onkeyup, it shouldn't, did u decide against onkeyup?


    To be completely honest I was not aware that "onkeyup" existed. I
    tried it and it solved the problem completely. Thanks!
     
    , Feb 27, 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. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,977
    Bryan Bullard
    Jul 11, 2003
  2. Christian Seberino
    Replies:
    21
    Views:
    1,798
    Stephen Horne
    Oct 27, 2003
  3. Ian Bicking
    Replies:
    2
    Views:
    1,106
    Steve Lamb
    Oct 23, 2003
  4. gk
    Replies:
    7
    Views:
    1,029
    Tom Anderson
    Oct 12, 2010
  5. Sound
    Replies:
    2
    Views:
    498
    Randy Webb
    Sep 28, 2006
Loading...

Share This Page