🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

kbd.js is a lightweight jQuery plugin that appends a minimal, clean, responsive, virtual qwertz (or qwerty) keyboard to any editable element.

Keyboard

Documentation

$.kbd

Usage

/* . . <link href="kbd.css" rel="stylesheet"/> . . <script src="jquery.js"></script> <script src="kbd.js"></script> . . */  $(function(){   $.kbd({   white:false, // keyboard theme (def.: false(=black))   qwertz:false, // layout (def.: false(=qwerty))   toggle_btn:false, // adds button to show/hide keyboard     hidden:false, // just init, don't show   input:function(char){[...]}, // input callback ($.OK/$.BS)   coffee:false // coffee splash? (white theme)  });  });    /*Methods: --------*/  $.kbd.show() $.kbd.hide()   $.kbd.white([true]) // white theme $.kbd.white(false) // black  $.kbd.caps(true) // permanent caps ('longpress') $.kbd.caps(false) // unset caps $.kbd.caps() // toggles caps  $.kbd.alt(true) // ABC->123  $.kbd.alt(false) // 123->ABC $.kbd.alt() // toggles ABC/123  $.kbd.lock([true]) // locks keyboard; no input $.kbd.lock(false) // unlock   /*Vars: -----*/  $.OK // Return/Enter $.BS // Backspace   /*Callback example (#txt=<pre>) -----------------------------*/  function input_cb(chr){  if(chr==$.BS/*Backspace*/)return($('#txt').text($('#txt').text().slice(0,-1)));  $('#txt').append((chr==$.OK/*Return/Enter*/)?'\n':chr); }   /*Detect mobile device --------------------*/  function is_md(){  return(typeof window.orientation!=='undefined')||(navigator.userAgent.indexOf('IEMobile')!==-1); } 

$.kbd

Docs/demos


CDNhttps://cdn.jsdelivr.net/gh/mntn-dev/kbd/kbd.min.js
https://cdn.jsdelivr.net/gh/mntn-dev/kbd/kbd.css

LicenseMIT

You May Also Like