alwaysOpen: true & scramble

[vasanthb9]

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]

Hi @vasanthb9!

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

[vasanthb9]

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]

I'll see what I can get done today.

[Mottie]

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]

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]

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]

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]

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]

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]

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.