Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old September 17th, 2008, 04:22 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default TEXT BOX BLUR

Hi,

I have an input with an onbluer event handler like this:

<input type="text" class="Box" onblur="SaveResultsTitleGrid(this);" onfocus="Edit(this);" >

When the user clicks outside the text box, the SaveResultsTitleGrid() function is called and everything works fine.

However, if the user press the "enter key" on the keyboard I would like to call the same function and leave the text box.

I have tried the code below but it is not working as expected.

document.onkeydown = getKey

/*Catches the enter key*/

function getKey(keyEvent)
{
   keyEvent = (keyEvent) ? keyEvent : window.event
   input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;

   if (keyEvent.type == "keydown")
   {
       if(keyEvent.keyCode==13)
       {
          SaveResultsTitleGrid(input)
       }
       else
       {
          return
       }
   }
}

function SaveResultsTitleGrid(obj)
{
    var TitleText = obj.value; // Result to be recorded
    var SurveyID = obj.id.split(',');
    -----
    -----
}

I think the function is being called twice i.e. once for the blur event and once for when the enter key is pressed.

I would appreciate if someone could shed some light. How can I get the onblur event to work properly when the user presses the enter key?

Cheers

P
  #2 (permalink)  
Old September 17th, 2008, 01:46 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

You are probably correct; you are getting called both by the Enter key and the onblur.

Okay, so why not simply have the Enter key move the focus to the next form field, which will of course cause the onBlur for the text field to be invoked?

Silly example (works only in MSIE, to keep it small), but clearly shows that the onBlur is *NOT* being invoked twice when you use this scheme:
Code:
<form>
<input name="t1" onBlur="this.form.copy.value += this.value;"
       onKeyDown="if ( window.event.keyCode == 13 ) this.form.t2.focus();">
<p>
<input name="t2">
<p>
<input name="copy" readonly>
</form>
By the by...
(1) Why do you put the event handler for keydown on the entire document, instead of only on the field you care about?
(2) Why do you check for the event *being* keydown when the only way to get to the event handler is, indeed, via a keydown?
  #3 (permalink)  
Old September 18th, 2008, 05:12 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Old Pedant,

Thanks for your reply.

I had the same idea to have the enter key move the focus to another field but this text box is the only field I have on the page.

If I alert the user to use the mouse to click outside the text box and then return false then it sort of works. But it would be nice if I could also run the function.

You are right. I will try to move the handler to the field only instead of whole page.

document.onkeydown = getKey

    /*Catches the enter key*/
    function getKey(keyEvent)
    {
        //debugger
        keyEvent = (keyEvent) ? keyEvent : window.event
        input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement;
        if (keyEvent.type == "keydown")
        {
            if(keyEvent.keyCode==13)
            {
                //SaveResultsTitleGrid(input)
                alert("Please use your mouse to click outside the text box")
                return false
            }
            else
            {
                return
            }
        }
    }
  #4 (permalink)  
Old September 18th, 2008, 02:48 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

So simply invoke the blur function from the enter key code.

<input name="t1" onBlur="this.form.copy.value += this.value;"
       onKeyDown="if ( window.event.keyCode == 13 ) this.blur();">

Haven't tried that. Logic says it should work, but then there is MSIE.

  #5 (permalink)  
Old September 25th, 2008, 10:59 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Old Pedant,

Thanks again. I will try the code above.

Cheers

P


Similar Threads
Thread Thread Starter Forum Replies Last Post
Grab Values From List Box into Text Box phungleon VB How-To 2 June 19th, 2008 10:33 PM
Count in combo box(display results in text box) mboyisis Access 4 April 4th, 2008 07:08 AM
Extract text from text file & put in dropdown box tsukey Beginning PHP 5 July 20th, 2004 09:49 PM
Rich Text Box vs Text Box snowy0 VB.NET 2002/2003 Basics 1 February 17th, 2004 02:11 PM
Search using drop down list box and a text box tcasp Classic ASP Basics 1 July 31st, 2003 02:58 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.