Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.keys
Jump to navigation
Jump to search
How to detect use of special keys in Dojo
Below you will find example use of the dojo.keys. Often you would like to use special keyboard keys to control the user interface.
Use the ENTER key to move between fields
In the login screen example below ENTER is used to move form the username field to the password field. In the password field ENTER is used to submit the form (if the dijit.form.Form.validate returns true).
Html5 inplementation:
<p><strong>Please enter your email and password:</strong><br></p>
<strong><label for="user" style="display:inline-block;width:100px;">Email:</label></strong>
<input id="user" type="text" name="username"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props=" required:true,
name: 'username',
value: '',
placeHolder: 'Your email',
missingMessage:'Ooops! You forgot your email!',
regExp: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$',
invalidMessage:'Ooops! You email is not correct!',
onKeyUp : function(e){
if(e.keyCode == dojo.keys.ENTER) {
dijit.byId('password').focus();
return true;
} else {
return false;
}
} " />
<br> <br>
<strong><label for="password" style="display:inline-block;width:100px;"> Password:
</label></strong>
<!-- Password -->
<input id="password" name="password" type="password"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props=" required:true,
name: 'pass',
type: 'password',
placeHolder: 'Enter your password',
missingMessage:'Ooops! You forgot to type your Passwrord!',
regExp: '^[0-9a-zA-Z.]{6,30}$',
invalidMessage:'Ooops! Minimum 6 characters!',
onKeyUp : function(e){
if(e.keyCode == dojo.keys.ENTER) {
if ( dijit.byId('formA').validate() ){
dijit.byId('formA').submit();
};
return true;
} else {
return false;
}
}"
data-dojo-id="password"/>Real world example may be found here TBD.
Verified in
IE 8, IE9 Firefox 3.6.22, Firefox 10 Dojo 1.6.1
References
Document History
| Version | Date | Author | Status | Purpose of update |
|---|---|---|---|---|
| 1 | 16 Feb 2012 | PSA | Draft | Not released. |