Secure Virtual Numeric Keyboard With Random Key Order - Cryxpad

The jQuery Cryxpad plugin dynamically generates a secure virtual numeric keyboard for your password field to secure keying of passwords.

With support for random key position to prevent against keyloggers and keep your password secure while typing.

How to use it:

1. The plugin requires jQuery JavaScript and Bootstrap framework.

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Create the html for the password field, virtual numeric keyboard, and validate/remove buttons.

<div id="cryxpad-clavier" style="position: absolute;left: 50%;">
  <div class="row" style="left: -50%;position: relative;">
    <div class="col">
      <div class="form-group">
        <label for="cryxpad-input-field">Code :</label>
        <input type="password" class="form-control" id="cryxpad-input-field" aria-describedby="cryxpad-input-field-help" placeholder="Enter your code">
        <small id="cryxpad-input-field-help" class="form-text text-muted">the inserted value can be remove by the remove button.</small>
      </div>
    </div>
  </div>

  <div class="cryxpad-container"></div>
  <div class="row" style="left: -50%;position: relative;margin-top: 20px;">
    <div class="col">
      <button id="cryxpad-validate-btn" class="btn btn-primary" type="button">Validate</button>
      <button id="cryxpad-remove-btn" type="button" class="btn btn-danger" > Remove</button>
    </div>
  </div>
</div>

3. Download and place the JavaScript file jquery.cryxpad.js after jQuery.

<script  src="jquery.cryxpad.js"></script>

4. Call the function to generate a default numeric keyboard.

$(function(){
  $('.cryxpad-container').cryxpad();
});

5. Set the number of buttons to generate per row/col.

$(function(){
  $('.cryxpad-container').cryxpad({
    'carreaux': 5 // default: 10
  });
});

6. Adjust the styles of generated buttons (keys).

$(function(){
  $('.cryxpad-container').cryxpad({
    'width': 50,
    'height': 50,
    'button':{
      'class':"btn btn-primary",
      'marginLeft':3,
      'marginTop':3,
      'marginBottom':3
    }
  });
});

7. Execute a callback function when a new keyboard is rendered.

$(function(){
  $('.cryxpad-container').cryxpad({
    'callback': null
  });
});

8. Default CSS selectors.

$(function(){
  $('.cryxpad-container').cryxpad({
    'parentId':'cryxpad-clavier',
    'containerClass':'cryxpad-container',
    'inputFormId':'cryxpad-input-field',
    'removeButtonId':'cryxpad-remove-btn',
    'validateButtonId':'cryxpad-validate-btn'
  });
});

---

This awesome jQuery plugin is developed by crxytol. For more Advanced Usages, please check the demo page or visit the official website.