search

Mottie / Keyboard

Virtual Keyboard using jQuery ~
http://mottie.github.io/Keyboard/
Other
1.78k stars 723 forks source link

alwaysOpen: true & scramble #276

Closed vasanthb9 closed 10 years ago

vasanthb9 commented 10 years ago

hi all, My requirement is " alwaysOpen : true " , but if i make it as TRUE virtual keyboard keys are not shuffulling. i.e keys are not getting randomized. pls help me how to make keys randomized when " alwaysOpen : true"

great thanks

Mottie commented 10 years ago

Hi @vasanthb9!

Hmm, that does look like a problem. I had it working before I switched the core to save already built keyboards.

vasanthb9 commented 10 years ago

Hi Mottie, thank you very much for replied me. Is there any solution for this problem, or else any alternative solution? plz help me from this problem. i am integrating this virtual keyboard(randomized) into my bank application. its very urgent requirement to me, my client is waiting for this virtual keyboard implementation. heart full thanks in advance ....

Mottie commented 10 years ago

I'll see what I can get done today.

Mottie commented 10 years ago

For now try this code (demo):

$(function () {
    $('#keyboard').keyboard({
        alwaysOpen: true,
        initialized: function (e, keyboard, el) {
            setTimeout(function () {
                keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
            }, 0);
        }
    })
    .addScramble({
        targetKeys: /[a-z\d]/i, // keys to randomize
        byRow: true, // randomize by row, otherwise randomize all keys
        randomizeOnce: true // if false, randomize every time the keyboard opens
    });
});

I'll see what I can do to better fix this issue when I have more time.

vasanthb9 commented 10 years ago

Oh!!! u awesome Mottie, its working fine, you saved me like anything else from that issue. i have few more issues.

issue#1. how to set keyboard in a specific position . example: in ' keyBoardDiv ' need to display the keyboard. like 

<div id="keyBoardDiv">
       here i need to show the Virtual Keyboard
</div>

Issue#2 : how to disable the keyboard on page load. need to display disabled/enabled keyboard in keyBoardDiv . when user click checkbox then it should be enabled and password field should get focused. till that it should be disabled.

<div id="checkBoxDiv">
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>

below is the complete code in login.jsp

<div id="passwordDiv">
    <input type="password" name="userPassword" id="passwordID" />
</div>
<div id="checkBoxDiv">Click here to use virtual keyboard for the password only(Recommended) 
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>
<div id="keyBoardDiv">
    here i need to show the Virtual Keyboard
</div>

please help me from above mentioned issue. awaiting for your reply. heart full thanks in advance.

vasanthb9 commented 10 years ago

i don't want special keys like Accept, Cancel, Tag, Enter, Space buttons on my keyboard. i tried removing those keys in $.keyboard.layouts .i.e in QWERTY layout. still its showing those keys in keyboard. any solution or suggestion plzzzzzzzzz.....

Mottie commented 10 years ago

Try this (demo):

CSS

/* turn off blue outline */
#passwordID[disabled] {
    box-shadow: none;
}
/* fade out keyboard keys */
.ui-keyboard-button[disabled] {
    opacity: 0.5;
}

HTML

<div id="passwordDivWrap">
    <input type="password" name="userPassword" id="passwordID" />
</div>
<div id="checkBoxDiv">Click here to use virtual keyboard for the password only(Recommended)
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>
<div id="keyBoardDiv"><!--here i need to show the Virtual Keyboard--></div>

Script

$(function () {

    $('#passwordID')
        // apply keyboard
        .keyboard({
            layout: 'custom',
            customLayout : {
                'default': [
                    '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
                    'q w e r t y u i o p [ ] \\',
                    'a s d f g h j k l ; \'',
                    '{shift} z x c v b n m , . / {shift}'
                ],
                'shift': [
                    '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
                    'Q W E R T Y U I O P { } |',
                    'A S D F G H J K L : "',
                    '{shift} Z X C V B N M < > ? {shift}'
                ]
            },
            // keyboard always visible
            alwaysOpen: true,
            // disable position utility
            position: '',
            // use original input only
            usePreview: false,
            // add keyboard to desired div
            appendTo: '#keyBoardDiv',
            // initialize scramble
            initialized: function (e, keyboard, el) {
                setTimeout(function () {
                    keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                    $('#passwordID, .ui-keyboard-button').prop('disabled', true);
                }, 0);
            }
        })
        .addScramble({
            targetKeys: /[a-z\d]/i, // keys to randomize
            byRow: true, // randomize by row, otherwise randomize all keys
            randomizeOnce: true // if false, randomize every time the keyboard opens
        });

    $('#keyboardCHKboxID').change(function () {
        // enable/disable input & keyboard
        $('#passwordID, .ui-keyboard-button').prop('disabled', !this.checked);
    });

});
vasanthb9 commented 10 years ago

Hi Mottie, i'm using your virtual keyboard, on page load cursor is always pointing on "passwordID" field which is wrong in my requirement. My requirement is " on page load the cursor should always point to "userNameID" . and user need to enter the userName and password through physical keyboard only. when user clicks the checkBox, then virtual keyboard get enabled and cursor should point on the password field need to enter the password through virtual keyboard only. when he uncheck the checkBox then he should enter the userName and password through physical keyboard only.

I want one CLEAR button on keyboard. when user clicks on CLEAR it should clear the values in password field. please help me from this issue . waiting for your response like any thing.

heart full thanks in advance.

below is the complete code for virtual Keyboard. code in login.jsp

<div id="passwordDivWrap">
    <input type="password" name="userPassword" id="passwordID" />
  <input type="text" name="userName" id="userNameID" />
</div>
<div id="checkBoxDiv">Click here to use virtual keyboard for the password only(Recommended)
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>
<div id="keyBoardDiv"><!--here i'm displaying the Virtual Keyboard--></div>

script code:

     this.onload=intialize;
    function intialize(){
        $(function () {

            $('#password')
                // apply keyboard
                .keyboard({
                    layout: 'custom',
                    customLayout : {
                        'default': [
                            '` 1 2 3 4 5 6 7 8 9 0 - = ',
                            'q w e r t y u i o p [ ] \\',
                            'a s d f g h j k l ; \'',
                            '{shift} z x c v b n m , . / {backspace}'
                        ],
                        'shift': [
                            '~ ! @ # $ % ^ & * ( ) _ + ',
                            'Q W E R T Y U I O P { } |',
                            'A S D F G H J K L : "',
                            '{shift} Z X C V B N M < > ? {backspace}'
                        ]
                    },
                    // keyboard always visible
                    alwaysOpen: true,
                    // disable position utility
                    position: '',
                    // use original input only
                    usePreview: false,
                    // add keyboard to desired div
                    appendTo: '#keyBoardDiv',
                    // initialize scramble
                    initialized: function (e, keyboard, el) {
                        setTimeout(function () {
                            keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                            $('.ui-keyboard-button').prop('disabled', true);
                        }, 0);
                    }
                })
                .addScramble({
                    targetKeys: /[a-z\d]/i, // keys to randomize
                    byRow: true, // randomize by row, otherwise randomize all keys
                    randomizeOnce: false // if false, randomize every time the keyboard opens
                });

            $('#keyboardCHKboxID').change(function () {
                // enable/disable input & keyboard
                $('.ui-keyboard-button').prop('disabled', !this.checked);
            });

        });
      }

in CSS file:

.ui-keyboard { padding: .3em; z-index: 16000; }
.ui-keyboard-has-focus { z-index: 16001; }
.ui-keyboard div { font-size: 0.9em; }
.ui-keyboard-button { height: 2em; width: 2em; min-width: .8em; overflow: hidden; line-height: 2.5em; -moz-user-focus: ignore; }
.ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; display: inline-block; }
.ui-keyboard-button-endrow { clear: lef5t; }
.ui-keyboard-widekey { min-width: 4em; width: auto; }
.ui-keyboard-space { width: 15em; }
.ui-keyboard-space span, .ui-keyboard-empty span { font: 0/0 a; text-shadow: none; color: transparent; } /* see http://nicolasgallagher.com/another-css-image-replacement-technique/ */
.ui-keyboard-preview-wrapper { text-align: center; }
.ui-keyboard-preview { text-align: left; margin: 0 0 3px 0; display: inline; width: 99%;} /* width is calculated in IE, since 99% = 99% full browser width =( */ 
.ui-keyboard-keyset { text-align: center; white-space: nowrap; }
.ui-keyboard-input { text-align: left; }
.ui-keyboard-input-current { -moz-box-shadow: 1px 1px 10px #fff; -webkit-box-shadow: 1px 1px 10px #fff; box-shadow: 1px 1px 10px #fff; background-color: white;}
.ui-keyboard-placeholder { color: #888; }
.ui-keyboard-nokeyboard { color: #888; border-color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */
.ui-keyboard-button.disabled { opacity: 0.5; filter: alpha(opacity=50); } /* used by the acceptValid option to make the accept button appear faded */
.ui-keyboard-spacer { display: inline-block; width: 1px; height: 0; }

/* turn off blue outline */
.ui-keyboard-button[disabled] {
    opacity: 0.5;
}
Mottie commented 10 years ago

I had to make seven changes (demo):

  1. Removed this.onload=intialize; and the wrapping function intialize(){ ... } as they aren't needed.
  2. Changed $('#password') to $('#passwordID').
  3. Changed {backspace} to {bksp} in the layout, otherwise it won't work
  4. Added {clear} to keyboard - I don't know where you wanted it exactly, so move it as desired

  5. Added a display option for the clear button to change the clear to a symbol, otherwise the scramble extension thinks the "C" is just another letter to scramble.

    display: {
 // this needs to be set otherwise the scramble
 // extension thinks the "C" is another letter
 // to scramble
 'clear' : '\u2717'
},
  6. Added initialFocus option, set to false. This doesn't give focus to the password field upon initialization

  7. Added a focus to username inside of the initialized function

    initialized: function (e, keyboard, el) {
 setTimeout(function () {
   keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
   $('.ui-keyboard-button').prop('disabled', true);
   $('#userNameID').focus();
 }, 0);
}
vasanthb9 commented 10 years ago

Dear Mottie,

right now am using virtual keyboard only for the field PASSWORD. but i need the same to USERNAME field also. can you please help me in code how can i do this with below code. in login.jsp:

<div id="passwordDivWrap">
    <input type="password" name="userPassword" id="password" />
  <input type="text" name="userName" id="userName" />
</div>
<div id="checkBoxDiv">Click here to use virtual keyboard for the userName and password (Recommended)
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>
<div id="keyBoardDiv"><!--here i'm displaying the Virtual Keyboard--></div>

script:

this.onload = intialize;

function intialize() {
    $(function () {

        $('#password')
        // apply keyboard
        .keyboard({
            layout: 'custom',
            customLayout: {
                'default': [
                    '` 1 2 3 4 5 6 7 8 9 0 - = ',
                    'q w e r t y u i o p [ ] \\',
                    'a s d f g h j k l ; \' {clear}',
                    '{shift} z x c v b n m , . / {bksp}'],
                    'shift': [
                    '~ ! @ # $ % ^ & * ( ) _ + ',
                    'Q W E R T Y U I O P { } |',
                        'A S D F G H J K L : " {clear}',
                    '{shift} Z X C V B N M < > ? {bksp}']
            },
            display: {
                // this needs to be set otherwise the scramble
                // extension thinks the "C" is another letter 
                // to scramble
                'clear' : '\u2717'
            },
            // keyboard always visible
            alwaysOpen: true,
            // disable position utility
            position: '',
            // use original input only
            usePreview: false,
            // add keyboard to desired div
            appendTo: '#keyBoardDiv',
            // give the preview initial focus when the keyboard becomes visible
            initialFocus : false,
            // initialize scramble
            initialized: function (e, keyboard, el) {
                setTimeout(function () {
                    keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                    $('.ui-keyboard-button').prop('disabled', true);
                    $('#userName').focus();
                }, 0);
            }
        })
        .addScramble({
            targetKeys: /[a-z\d]/i, // keys to randomize
            byRow: true, // randomize by row, otherwise randomize all keys
            randomizeOnce: false // if false, randomize every time the keyboard opens
        });

        $('#keyboardCHKboxID').change(function () {
            // enable/disable input & keyboard
            $('.ui-keyboard-button').prop('disabled', !this.checked);
        });

    });
}

heart full thanks in Advance.

Mottie commented 10 years ago

Hi @vasanthb9!

Do you want the username keyboard to be scrambled? I wouldn't think so... so in that case do the following:

$(function () {

    $('#password, #keyboardCHKboxID').keyboard({ /* set options */ });

    $('#password').addScramble({ /* scramble options */ });

});

there is no need for the this.onload = intialize; or wrapping the whole thing within a

function intialize() { ... }
vasanthb9 commented 10 years ago

Dear Mottie,

my requirement is , when user wants to enter his USERNAME , PASSWORD through virtual keyboard , first he needs to click the checkBox. i.e(Click here to use virtual keyboard for the userName and password (Recommended)). when he clicks this checkBox, then virtual keyboard should be enabled and user should enter his credentials(userName and password) through virtual keyboard only. if unchecks the checkBox, then virtual keyboard should be disabled. he can enter his credentials(userName and password) through physical keyboard .

below are the test case scenarios: scenario 1: user may enter his USERNAME through physical keyboard, if user wants to enter his PASSWORD through virtual keyboard then he need to click the checkbox to enable the virtual keyboard and he can fill password.

scenario 2: if user wants to enter his USERNAME through virtual keyboard then he needs to click the checkbox to enable the virtual keyboard and he can fill USERNAME. when he uncheck the checkbox, virtual keyboard should be disabled , he can enter his PASSWORD through physical keyboard.

scenarios3: user may enter his USERNAME and PASSWORD through virtual keyboard by clicking on checkbox to enable virtual keyboard.

for both username and password, virtual keyboard keys should be randomized. we are not providing two virtual keyboards(one for username and another for password). we are providing only ONE virtual keyboard to enter his credentials.

very heart full thanks in advance.

vasanthb9 commented 10 years ago

Dear Mottie, could you please provide me solution for the above mentioned issue. this is very urgent requirement. my client is waiting for this enhancement. i'm waiting for your response like anything.

heart full thatnks in advance.

Mottie commented 10 years ago

I too am under a serious time-crunch situation... I won't be free of it for one more week.

The problem is that each input will show a different scrambled keyboard. So to keep the keyboards the same, I would have to modify the scramble extension. If that isn't a necessary requirement, there are other examples within these issues of using a checkbox to enable/disable a keyboard (was that you I helped with before as well?). Sorry, my time is very limited (5 more days...)

vasanthb9 commented 10 years ago

Dear Mottie, Physical keyboard Tab button is not working on non-virtual keyboard and virtual keyboard input fields. could you please provide me any solution for this problem.

thanks in advance.

Mottie commented 10 years ago

Using the tab key within an input allows tabbing to the next input in the form. So when the virtual keyboard is open, this ability is disabled by default because if the usePreview option is set as true, there is an additional input on the page which messes up the tab indexing order.

If you want to allow tabbing between inputs, then set the tabNavigation option to true.

vasanthb9 commented 10 years ago

Dear Mottie, Thank you very much for your response.

if i set usePreview= true with tabNavigation=true, then only tab is working fine. but in requirement we don't want usePreview=true. so for this i made it as usePreview=false and tabNavigation=true. but tab button is not working properly. in this case if i tab out then focus is coming on to next input field. please help me how to fix this tab issue.

below is the complete code. in login.jsp

<div id="passwordDivWrap">
  <input type="text" name="userName" id="userName" onfocus="changes('username');"/>
  <input type="password" name="userPassword" id="password" onfocus="changes('password');"/>

</div>
<div id="checkBoxDiv">Click here to use virtual keyboard for the userName and password (Recommended)
    <input type="checkbox" name="keyboardCHK" id="keyboardCHKboxID" />
</div>
<div id="keyBoardDiv" style="display:none"><!--here i'm displaying the Virtual Keyboard for  keyboardForUserName --></div>
<div id="keyBoardDiv1" style="display:none"> <!--here i'm displaying the Virtual Keyboard for  keyboardForPassword--></div>

<div id="keyBoardDiv2"> <!--here i'm displaying the Virtual Keyboard for keyboardForDefault-->/div>

Script:

    $(document).ready(function() {
       keyboardForDefault();
       keyboardForUserName();
       keyboardForPassword();
    });
    function changes(property){
        if($('#keyboardCHKboxID').is(':checked')){
           if(property == 'username'){
            keyboardForUserName();
              $('#keyBoardDiv').show();
              $('#keyBoardDiv1').hide();
              $('#keyBoardDiv2').hide();
       }else if(property == 'password'){
             keyboardForPassword();
               $('#keyBoardDiv').hide();
               $('#keyBoardDiv2').show();
               $('#keyBoardDiv1').hide();
            }
       }
     }

   function keyboardForUserName() {
       $('#username')
       // apply keyboard
       .keyboard({
           layout: 'custom',
           customLayout: {
               'default': [
                   '` 1 2 3 4 5 6 7 8 9 0 - = ',
                   'q w e r t y u i o p [ ] \\',
                   'a s d f g h j k l ; \' {clear}',
                   '{shift} z x c v b n m , . / {bksp}'],
                   'shift': [
                   '~ ! @ # $ % ^ & * ( ) _ + ',
                   'Q W E R T Y U I O P { } |',
                       'A S D F G H J K L : " {clear}',
                   '{shift} Z X C V B N M < > ? {bksp}']
           },
           display: {
               // this needs to be set otherwise the scramble
               // extension thinks the "C" is another letter 
               // to scramble
               'clear' : '\clear'
           },
           // keyboard always visible
           alwaysOpen: true,
           // disable position utility
           position: '',
           // use original input only
           usePreview: false,
           // add keyboard to desired div
           tabNavigation: true,
           appendTo: '#keyBoardDiv',
        // give the preview initial focus when the keyboard becomes visible
        initialFocus : false,
           // initialize scramble
           initialized: function (e, keyboard, el) {
               setTimeout(function () {
                   keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                   $('.ui-keyboard-button').prop('disabled', true);
                  }, 0);
           }
       })
       .addScramble({
           targetKeys: /[a-z\d]/i, // keys to randomize
           byRow: true, // randomize by row, otherwise randomize all keys
           randomizeOnce: false // if false, randomize every time the keyboard opens
       });

       $('#keyboardCHKboxID').change(function () {
           // enable/disable input & keyboard
           $('.ui-keyboard-button').prop('disabled', !this.checked);
         });

   }

   function keyboardForPassword() {
       $('#password')
       // apply keyboard
       .keyboard({
           layout: 'custom',
           customLayout: {
               'default': [
                   '` 1 2 3 4 5 6 7 8 9 0 - = ',
                   'q w e r t y u i o p [ ] \\',
                   'a s d f g h j k l ; \' {clear}',
                   '{shift} z x c v b n m , . / {bskp}'],
                   'shift': [
                   '~ ! @ # $ % ^ & * ( ) _ + ',
                   'Q W E R T Y U I O P { } |',
                       'A S D F G H J K L : " {clear}',
                   '{shift} Z X C V B N M < > ? {bksp}']
           },
           display: {
               // this needs to be set otherwise the scramble
               // extension thinks the "C" is another letter 
               // to scramble
               'clear' : '\clear'
           },
           // keyboard always visible
           alwaysOpen: true,
           // disable position utility
           position: '',
           // use original input only
           usePreview: false,
           tabNavigation: true,
           // add keyboard to desired div
           appendTo: '#keyBoardDiv1',
        // give the preview initial focus when the keyboard becomes visible
        initialFocus : false,
           // initialize scramble
           initialized: function (e, keyboard, el) {
               setTimeout(function () {
                   keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                   $('.ui-keyboard-button').prop('disabled', true);
                }, 0);
           }
       })
       .addScramble({
           targetKeys: /[a-z\d]/i, // keys to randomize
           byRow: true, // randomize by row, otherwise randomize all keys
           randomizeOnce: false // if false, randomize every time the keyboard opens
       });

       $('#keyboardCHKboxID').change(function () {
           // enable/disable input & keyboard
           $('.ui-keyboard-button').prop('disabled', !this.checked);
        });

   }

   function keyboardForDefault() {
      $('#password')
       // apply keyboard
       .keyboard({
           layout: 'custom',
           customLayout: {
               'default': [
                   '` 1 2 3 4 5 6 7 8 9 0 - = ',
                   'q w e r t y u i o p [ ] \\',
                   'a s d f g h j k l ; \' {clear}',
                   '{shift} z x c v b n m , . / {bksp}'],
                   'shift': [
                   '~ ! @ # $ % ^ & * ( ) _ + ',
                   'Q W E R T Y U I O P { } |',
                       'A S D F G H J K L : " {clear}',
                   '{shift} Z X C V B N M < > ? {bksp}']
           },
           display: {
               // this needs to be set otherwise the scramble
               // extension thinks the "C" is another letter 
               // to scramble
               'clear' : '\clear'
           },
           // keyboard always visible
           alwaysOpen: true,
           // disable position utility
           position: '',
           // use original input only
           usePreview: false,
           tabNavigation: true,
           // add keyboard to desired div
           appendTo: '#keyBoardDiv2',
        // give the preview initial focus when the keyboard becomes visible
          initialFocus : false,
           // initialize scramble
           initialized: function (e, keyboard, el) {
               setTimeout(function () {
                   keyboard.$keyboard = keyboard.scramble_setup(keyboard.$keyboard);
                   $('.ui-keyboard-button').prop('disabled', true);
                   }, 0);
           }
       })
       .addScramble({
           targetKeys: /[a-z\d]/i, // keys to randomize
           byRow: true, // randomize by row, otherwise randomize all keys
           randomizeOnce: false // if false, randomize every time the keyboard opens
       });

       $('#keyboardCHKboxID').change(function () {
           // enable/disable input & keyboard
           $('.ui-keyboard-button').prop('disabled', !this.checked);
       });

   }

please find the my application Login page screenshot. user login page

vasanthb9 commented 9 years ago

Dear Mottie,

I downloaded jquery.keyboard.min.js from you and using this as for virtual keyboard. but js file is having lot of errors like
Multiple markers at this line

/_! jQuery UI Virtual Keyboard Version 1.18.8 minified (MIT License) Caret code modified from jquery.caret.1.02.js (MIT License) */ ;(function(e){e.keyboard=function(b,m){var a=this,d;a.$el=e(b);a.el=b;a.$el.data("keyboard",a);a.init=function(){a.options=d=e.extend(!0,{},e.keyboard.defaultOptions,m);a.shiftActive=a.altActive=a.metaActive=a.sets=a.capsLock=!1;a.lastKeyset=[!1,!1,!1];a.rows=["","-shift","-alt","-alt-shift"];e('\x3c!--[if lte IE 8]> Githubissues.

  • Githubissues is a development platform for aggregating issues.