Using the Enter Key to trigger a password button

**Dormilich** · Dec 2 '10, 07:33 AM

a) real password protection must be done serverside. anyone looking at your source code will see the password.

b) for the password field use <input type="password" >

**Adam Wolfe** · Dec 2 '10, 02:04 PM

a) real password protection must be done serverside. anyone looking at your source code will see the password.

what do you mean by serverside ? How is this possible what would I have to edit ? Also is it very hard to make the enter key on the keyboard submit the password field ?

As I am very new to HTML all the google searches I am doing on this topic are hard to follow I do not know what to put where I did find this little bit of code though do i need to use something like this:

Code:

   1. <script>  
   2.   
   3.         function clickButton(e, buttonid){   
   4.   
   5.           var evt = e ? e : window.event;  
   6.   
   7.           var bt = document.getElementById(buttonid);  
   8.   
   9.           if (bt){   
  10.   
  11.               if (evt.keyCode == 13){   
  12.   
  13.                     bt.click();   
  14.   
  15.                     return false;   
  16.   
  17.               }   
  18.   
  19.           }   
  20.   
  21.         }  
  22.   
  23.     </script>

**Dormilich** · Dec 2 '10, 02:13 PM

what do you mean by serverside ?

on the webserver. there are different ways to do that.
- on an Apache webserver, you can create a .htaccess file that asks the client for verification (username & password)
- you can also use any serverside programming language to write a script that validates a given username and password and thus grants access to webpages.

usually hitting the enter key triggers the submit button to be "pressed", although you can use JavaScript to capture this event.

**Adam Wolfe** · Dec 2 '10, 02:23 PM

ok I will read up about the .htaccess files. Is the JavaScript code i posted above what I would use to "capture" that event ? I just do not know what to place where.

**Dormilich** · Dec 2 '10, 02:26 PM

Is the JavaScript code i posted above what I would use to "capture" that event ?

yes and no.

on the one hand side, checking for keycode 13 is what you need to do, on the other hand side, the function will not work due to the event not being registerd and the buttonid being undefined.

**Adam Wolfe** · Dec 2 '10, 02:28 PM

What would I have to do to change the code to be functional ?

**Dormilich** · Dec 2 '10, 02:38 PM

you know how event handling (in general) works?

**Adam Wolfe** · Dec 2 '10, 07:09 PM

I actually don't know how event handling works

**Dormilich** · Dec 3 '10, 08:26 AM

ok, before going back to your problem, I’ll talk a bit about Events, as this is necessary to understand the solution.

How does HTML code get into JavaScript?

the HTML source code is translated for JavaScript so that it can alter the HTML’s appearance. it is of utmost importance to understand this, otherwise the HTML/JavaScript interaction stays a mystery.
when the browser loads the HTML source code, it internally creates a representation of the code. thus each tag and each attribute and each text gets assigned a special object. the mechanism responsible for that is called DOM (Document Object Model). so what you have access to in JavaScript is not the HTML itself, but its object representation in the browser.

it is important to understand that an HTML attribute is not the same as the HTML attribute’s object equivalent in JavaScript.

rule of thumb: in JavaScript, everything is an object (and I mean everything).

What is an Event?

an event is some kind of action that occurs in the document, for example a click, a load, a mouse moving, all kinds of stuff. the events that are possible are standardised by the W3C in the DOM .

How does an Event work in JavaScript?

this is implemented in JavaScript through the use of the Event object, i.e. the user’s action (e.g. a click) is translated/modelled into a native JavaScript object (named "Event"). then this object travels through the document tree (resp. its objects that represent a HTML element) where it can trigger programmatic actions. these events are created automatically, you don’t have to do anything there.

How do I make an Event trigger something?

this is called Event Handling (making an event do something useful). the basic idea is that you wait for an event object to pass by. therefore you add a programming instruction to the object (the HTML element object) where the event passes through.

this can be done in several ways:
* inline JavaScript: only do that when there is no other possibility.

* DOM-0 Events: before there was a standard, browser vendors invented a way to handle events. this is done by using event properties (a property is part of an object, it is not the same as an HTML attribute). each HTML element object in JavaScript can be assigned an event property consisting of "on" + the event name (e.g. "click" => onclick). to this property a function variable must be passed. additionally, this function may only contain a single parameter that is the Event object.

Code:

function event_handler(evt)
{
    alert("this is a " + evt.type + " event");
}

// div being a <div> element in JavaScript
// note the missing parentheses
div.onclick = event_handler;

according to the standard, when the click event reaches that <div> element, the function event_handler is executed with the click event object as parameter. additionally, the scope of the function changes. until now, the function belonged to the global scope, but now it is owned by the executing element object. this manifests in the system variable this, which changes from window to div (a very convenient way to access the current element!)

note: IE does not adhere to the standard. instead of passing an event through the document tree, it provides the event object as a global, only triggering the function to execute. (you already used the work-around for that)

* DOM-2: eventually, the W3C released a standard how Events should work. this brought along some very convenient features:
- you can assign multiple event handlers
- the event travels up and down in the document tree (bubbling and capturing)
- you can influence the event flow (canceling the event, preventing the default action an event would usually trigger).

Code:

function event_handler_1(evt)
{
    alert("I’m a " + this.tagName + " element");
    // cancel the event
    evt.stopPropagation();
}

function event_handler_2(evt)
{
    alert("this is a " + evt.type + " event");
}
// catch event when it goes down in the document tree
div.addEventListener("click", event_handler_1, true);
// catch event when it goes up in the document tree
// this is the same direction as in DOM-0
div.addEventListener("click", event_handler_2, false);

/* you may guess what actions will happen … */

and now the bad news: IE doesn’t implement that at all. MS decided to go its own totally different way. there is also no easy work-around to make your code cross-browser compatible for the full set of features.

Using the Enter Key to trigger a password button

Using the Enter Key to trigger a password button

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment