Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.keys

From PMISwiki
Jump to: navigation, 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.