Minimal AZERTY Keyboard With jQuery - asvKeyboard

asvKeyboard is a small virtual keyboard plugin which helps you create an on-screen AZERTY keyboard for French webpages or web apps.

How to use it:

1. Build the HTML for the AZERTY keyboard.

<div class="vKeyboard" id="vKeyboard" name="vKeyboard" style="display: none">
  <div class="vKeyboard-container d-flex row">
    <div class="col-8 vKeyboard-letters " id="vKeyboard-letters">
      <div class="row vKeyboardRow vKeyboard-offsetRow1 justify-content-between">
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-A" value="A">A</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-Z" value="Z">Z</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-E" value="E">E</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-R" value="R">R</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-T" value="T">T</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-Y" value="Y">Y</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-U" value="U">U</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-I" value="I">I</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-O" value="O">O</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-P" value="P">P</button>                
      </div>
      <div class="row vKeyboardRow vKeyboard-offsetRow2 justify-content-between">
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-Q" value="Q">Q</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-S" value="S">S</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-D" value="D">D</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-F" value="F">F</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-G" value="G">G</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-H" value="H">H</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-J" value="J">J</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-K" value="K">K</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-L" value="L">L</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-M" value="M">M</button>                
      </div>
      <div class="row vKeyboardRow vKeyboard-offsetRow3 justify-content-between">
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-W" value="W">W</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-X" value="X">X</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-C" value="C">C</button>                
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-V" value="V">V</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-B" value="B">B</button>
        <button type="button col" class="btn btn-primary vKeyboard-letter" id="keyboard-N" value="N">N</button>
        <span class="vKeyboard-spacer"></span>
        <button type="button col" class="btn btn-primary vKeyboard-symbol" id="keyboard-tiret" value="-">-</button>
        <button type="button col" class="btn btn-primary vKeyboard-symbol" id="keyboard-underscore" value="_">_</button>                
        <button type="button col" class="btn btn-primary vKeyboard-symbol" id="keyboard-@" value="@">@</button>                
      </div>
      <div class="row vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-symbol vKeyboard-space" id="keyboard-space" value=" ">
          <span class="vKeyboard-space-character">┗━━━━━━━━━━━┛</span>
        </button>             
      </div>
    </div>
    <div class="col vKeyboard-numbers" id="vKeyboard-number">
      <div class="row justify-content-end vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-1" value="1">1</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-2" value="2">2</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-3" value="3">3</button>
      </div>
      <div class="row justify-content-end vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-4" value="4">4</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-5" value="5">5</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-6" value="6">6</button>
      </div>
      <div class="row justify-content-end vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-7" value="7">7</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-8" value="8">8</button>
        <button type="button col" class="btn btn-primary vKeyboard-number" id="keyboard-9" value="9">9</button>
      </div>
      <div class="row justify-content-end vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-number vKeyboard-double" id="keyboard-0" value="0">0</button>
        <button type="button col" class="btn btn-primary vKeyboard-number vKeyboard-symbol vKeyboard-pad" id="keyboard-." value=".">.</button>
      </div>
    </div>
    <div class="col-1 vKeyboard-return-enter ml-auto" id="vKeyboard-enter-return">
      <div class="row vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-return vKeyboard-numOk vKeyboard-double" id="keyboard-return" value="">⌫</button>
      </div>
      <div class="row vKeyboardRow">
        <button type="button col" class="btn btn-primary vKeyboard-enter vKeyboard-double" disabled="disabled" id="keyboard-enter">OK</button>
      </div>
    </div>
  </div>
</div>

2. Load the necessary jQuery library and jquery.caret plugin in the document.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.caret.min.js"></script>

3. Download and load the jQuery asvKeyboard plugin's script after jQuery.

<script src="js/main.js"></script>

4. The necessary CSS styles for the virtual keyboard.

.vKeyboard {
  background-color: #000;
  position: absolute;
  height: var(--keyboardHeight);
  top: calc(var(--documentHeight) - var(--keyboardHeight));
  width: inherit;
  overflow: hidden;
}

.vKeyboard-container {
  margin: 0px 20px;
}

.vKeyboard-numbers {
  margin-right: var(--keyboardLetterSpacing);
}

.vKeyboard-spacer {
  width: calc(var(--keyboardButton) / 2);
}

.vKeyboardRow {
  margin-top: var(--keyboardLetterSpacing);
  margin-bottom: var(--keyboardLetterSpacing);
}

.vKeyboard-offsetRow1 {
  margin-left: 0px;
  margin-right: var(--keyboardButton);
}
.vKeyboard-offsetRow2 {
  margin-left: calc(var(--keyboardButton) / 2);
}
.vKeyboard-offsetRow3 {
  margin-left: var(--keyboardButton);
}

.vKeyboard-letter,
.vKeyboard-number,
.vKeyboard-symbol,
.vKeyboard-enter,
.vKeyboard-return {
  color: #fff;
  font-size: 45px;
  height: var(--keyboardButton);
  width: var(--keyboardButton);
  border-radius: 6px;
  margin: 0 0;
}

.vKeyboard-letter,
.vKeyboard-number {
  background-color: #4e4e4e;
  box-shadow: 0 0 0px 0 #4e4e4e;
  border: solid 0px #4e4e4e;
}

.vKeyboard-letter {
  margin-left: var(--keyboardLetterSpacing);
}

.vKeyboard-number {
  margin-left: var(--keyboardNumberSpacing);
}

.vKeyboard-symbol,
.vKeyboard-return {
  background-color: #3a3a3a;
  box-shadow: 0 0 0px 0 #3a3a3a;
  border: solid 0px #3a3a3a;
  margin-left: 12px;
}

.vKeyboard-double {
  width: calc((var(--keyboardButton) * 2) + var(--keyboardNumberSpacing));
}

.vKeyboard-pad {
  margin-left: var(--keyboardNumberSpacing);
}

.vKeyboard-return {
  margin-left: 0;
}

.vKeyboard-enter {
  background-color: #9cd9cd;
  box-shadow: 0 0 0px 0 #9cd9cd;
  border: solid 0px #9cd9cd;
  color: #fff;
  height: calc(
    (var(--keyboardButton) * 3) + (var(--keyboardLetterSpacing) * 2)
  );
}

.vKeyboard-space {
  margin-left: 20px;
  width: 100%;
}

.vKeyboard-space-character {
  position: relative;
  top: 15px;
  pointer-events: none;
}

---

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