Extension Scramble

Scramble (Demo)

• Scramble keyboard keys to increase security.
• Scramble keys by row or by an entire keyset.
• Scramble keys once, each time a keyboard is opened, or after every user input.

Problems:

• Currently, you cannot scramble groups of keys separately, e.g. scrambling numbers with other numbers and scrambling letters with other letters.
  • The only work-around is to create a separate number (or letter) row, add {empty} buttons in positions where the those keys should go; then use CSS to reposition the grouped keys - demo. A better method may be possible, or built-in method may be added in the future.

Setup

Page Head

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery UI position utility (optional, if you position the keyboard yourself) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<!-- keyboard widget css & script -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-scramble.js"></script>

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

Javascript

// target a specific keyboard, or use $('.ui-keyboard-input') to target all
$('#keyboard')
  // keyboard plugin - see the full list of options above.
  .keyboard()
  .addScramble({
    // keys to randomize (regex)
    targetKeys    : /[a-z\d]/i,
    // true = randomize by row, otherwise randomize all keys
    byRow         : true,
    // true = randomize one keyset & duplicate
    byKeySet      : false,
    // true = randomize only once on keyboard visible
    randomizeOnce : true,
    // if true, randomize after user input;
    // only `targetKeys` cause a new randomization
    randomizeInput : false,
    // scramble extension initialized callback
    init          : null // function(keyboard){}
  });

Options

targetKeys

Default: /[a-z\d]/i
Type: Regular Expression (RegExp)

Regular expression used to target specific keys to scramble. Keys with only a single character will be tested with this regular expression.

byRow

Default: true
Type: Boolean

Scramble keys by row, otherwise scramble all keys randomly.

byKeySet

Default: false
Type: Boolean

When false, keys in each keyset are scrambled separately.

If true, the keys in one keyset are scambled; then the same randomization is copied to the other keysets. This keeps the lower case and upper case keys together.

randomizeOnce

Default: true
Type: Boolean

When false, the keys are scrambled each time the keyboard becomes visible.

If true, randomization only occurs the first time the keyboard becomes visible.

randomizeInput

Default: false
Type: Boolean

When false, randomization of keys occurs as set by the randomizeOnce setting.

If true, randomization occurs after each user input; As expected, only the use of targetKeys would cause a new randomization.

init

Default: null
Type: Null or Function

This callback function is executed after the keyboard scramble extension has completed initialization. The only parameter provided is the keyboard object which can be obtained by using the getkeyboard() function (e.g. var keyboard = $('input').getkeyboard();)