Solved

Javascript + Catch Keystroke on input and run function

Posted on 2008-10-01
5
1,260 Views
Last Modified: 2012-05-05
Hey guys,
So I've been sifting through all the ways to capture a keystroke using Javascript, yet mine seems a bit more specific.

So I have a text input in one of my forms that I want to catch an "enter" keystroke. If the user presses enter on that specific input, I need javascript to then run a function called manageAccount instead.

So this would be the process:
- User presses enter on input3, which would be the onkeydown calling a keystroke function?
- the keystroke function checks to see if the keystroke is 'enter', or keystroke 13
- If it's keystroke 13, it needs to execute function manageAccount (but also needs to not submit the actual form, since enter typically submits a form)

I've been researching this and can't seem to come up with a good way to do this. Thoughts?
0
Comment
Question by:gingersnapped
  • 3
5 Comments
 

Author Comment

by:gingersnapped
ID: 22618460
Here's an example I've been working with so far. It doesn't get to the alert that I have setup to test if it's catching the enter keystroke, so I'm obviously doing something wrong here.
HTML:
 

<input type="text" size="25" name="emaillogin" onkeydown="return kH(event);">
 

Javascript:

 

function kH(e) {    

    var key = e ? e.which : window.event.keyCode     

    if(key == 13)

    {

      alert("you've hit enter");  

      manageAccount();

    }
 

    function manageAccount(){
 

    .....
 

    }

Open in new window

0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 175 total points
ID: 22618732
Try:

function kH(e) {    
    var key = e.charCode || e.keyCode;
    if(key == 13)
    {
      alert("you've hit enter");  
      manageAccount();
    }
}
0
 

Author Comment

by:gingersnapped
ID: 22619152
That seemed to help a lot. I suppose the only issue with this is when you press enter, it still tries to submit the form first, it fails to submit since I didnt put a value in the input first... then it shows me the 'you've hit enter' alert and runs manageAccount.

Is there a way to stop the submit? I know return = false typically does that, not sure where that'd go in this situation.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22619605
Note that IE and FF use different event handling - FF passes the event to the event sink via the "e" variable, but IE 6 does not.

The window.event.srcElement is IE-specific. FF (and Opera and Safari) use Event.target.
0
 

Author Comment

by:gingersnapped
ID: 22619781
Actually keeping it from submitting is simply adding a variable in my form validation. I set a variable to -1. If they click enter, that variable now becomes 1. So in the form validation it checks to see if the variable is NOT -1 (meaning they clicked enter on that one input), so it automatically fails the submit.  It seems to work in both IE and FF, so that's great. Kudos to Morcalavin on the help.
Final Javascript:
 

idcheck = -1; 
 

function kH(e) 

	 {    

	   idcheck = 1; 

	   var key = e.charCode || e.keyCode;

	   if(key == 13)

	   {

	     manageAccount();

	   }

	 }
 

function validateForm() {	

		if (idcheck != -1)

		{

		return false;

		}

 ......
 

}

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now