The modern virtual keyboard for React\n Customizable. Responsive. Lightweight.\n \n \n \n \n \n \n\n \n \n View Demos\n \n \n Documentation\n \n \n \n \n Explore articles\n {{blogArticles}}\n \n \n\n \n \n Simple-keyboard is a fast, dependency-free and customizable virtual keyboard for rich and snappy web applications.\n \n Features\n \n Supports React without the need for extra plugins.\n Many options and methods to enhance customization.\n Flex-box layout for easy styling.\n Supports Modules such as Autocorrect, Input Mask, among others.\n Ability to style a group of buttons independently, for advanced layouts.\n Great for all types of apps (Kiosks, gamepad-controlled apps, etc).\n Multi-keyboard instance support.\n Ready to use implementation demos.\n And more.\n \n \n\n \n Supported Languages\n \n Arabic\n Burmese\n Chinese\n Czech\n English\n French\n Georgian\n German\n Hebrew\n Hindi\n Italian\n Japanese\n Kannada\n Korean\n Russian\n Sindhi\n Spanish\n Thai\n Turkish\n Ukrainian\n Urdu\n \n \n \n \n \n \n\n\n <div class="footer"><a href="https://prss.io" class="d-flex align-items-center footer-shoutout" target="_blank" rel="noopener"><span>Website Powered by <span class="prss-logo-wrapper"><img class="prss-footer-image mx-1" src="data:image/png;base64,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" width="15"> PRSS\n \n\n\n\n\n\n\n\n ',template:"post",updatedAt:1715388556372,createdAt:1714781141844,vars:{}},rootPath:"../",headHtml:'<title>%item.title% - %site.title%\n<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"><\/script>\n\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">\n<meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM.">\n<meta name="author" content="Francisco Hodge">\n<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png">\n<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png">\n<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png">\n<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png">\n<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png">\n<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png">\n<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png">\n<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png">\n<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png">\n<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png">\n<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png">\n<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png">\n<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png">\n<link rel="manifest" href="/assets/img/ico/manifest.json">\n<meta name="msapplication-TileColor" content="#ffffff">\n<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">\n<meta name="theme-color" content="#ffffff">\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="mobile-web-app-capable" content="yes">\n<title>Simple-keyboard - The Modern Javascript Virtual Keyboard\n<meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard">\n<meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more.">\n<meta name="twitter:card" content="summary_large_image">\n<meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png">\n<meta property="og:url" content="https://virtual-keyboard.js.org">\n<meta property="og:site_name" content="simple-keyboard">\n<meta name="twitter:image:alt" content="Simple-keyboard">\n<link rel="stylesheet" href="/assets/css/fonts.css">\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n<link rel="stylesheet" href="https://unpkg.com/simple-keyboard@latest/build/css/index.css">\n<link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet">\n<link rel="stylesheet" href="/assets/css/main.css"><noscript>\n <link rel="stylesheet" href="/assets/css/noscript.css">\n\n<link href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">\n<link rel="stylesheet" href="/assets/css/font-awesome.min.css">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">\n<link rel="stylesheet" href="../index.css" /><style>\r\n body {\r\n background-color: #282c34;\r\n color: #212529;\r\n }\r\n',footerHtml:'<script>\r\n if (location.pathname.includes("blog")) {\r\n document.body.classList.add("post-body");\r\n const n = PRSS.getItemChildrenBySlug("blog"),\r\n e = PRSS.getComponent("header"),\r\n t = PRSS.getComponent("footer"),\r\n a = PRSS.getProp("item");\r\n\r\n PRSS.appendToHead(e.headHtml);\r\n PRSS.appendToHead(t.headHtml);\r\n\r\n if ("/blog/" === location.pathname) {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}\r\n \r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\r\n \r\n \r\n \r\n \r\n <div class="article-content">\r\n ${a.content}\r\n \r\n \r\n \r\n \r\n \r\n <footer>${t.content}\r\n `, true);\r\n\r\n PRSS.setContent(".blog-articles", `\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}">\r\n <h4 class="article-title">\r\n ${n.title}\r\n \r\n <div class="article-content">\r\n ${n.content}\r\n \r\n \r\n \r\n `).join("")}\r\n `)\r\n } else {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}\r\n \r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\r\n \r\n \r\n \r\n \r\n <div class="featured-image" style="${a.vars.featuredImageUrl ? `background-image: url(${a.vars.featuredImageUrl})` : ""}">\r\n <div class="article-content">\r\n ${a.content}\r\n \r\n \r\n \r\n \r\n \r\n <footer>${t.content}\r\n `, true)\r\n }\r\n } else {\r\n const n = PRSS.getProp("item");\r\n\r\n let content = n.content;\r\n\r\n if (content.includes("{{blogArticles}}")) {\r\n const n = PRSS.getItemChildrenBySlug("blog");\r\n content = content.replace("{{blogArticles}}", `\r\n <div class="blog-articles">\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}" target="_blank">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}">\r\n <h4 class="article-title">\r\n ${n.title}\r\n \r\n <div class="article-content">\r\n ${n.content}\r\n \r\n \r\n \r\n `).join("")}\r\n \r\n `)\r\n }\r\n\r\n PRSS.setContent("body", content);\r\n }\r\n<\/script>\r\n<script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><\/script><script src="../index.js"><\/script> \x3c!-- Scripts --\x3e\r\n <script src="https://cdn.jsdelivr.net/npm/twemoji@11.3.0/2/twemoji.min.js" crossorigin="anonymous"><\/script>\r\n <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"><\/script>\r\n <script src="../assets/js/jquery.min.js"><\/script>\r\n\r\n <script>\r\n if (jQuery) {\r\n var isIE = false;\r\n var ua = window.navigator.userAgent;\r\n var old_ie = ua.indexOf(\'MSIE \');\r\n var new_ie = ua.indexOf(\'Trident/\');\r\n\r\n if ((old_ie > -1) || (new_ie > -1)) {\r\n isIE = true;\r\n }\r\n\r\n if (isIE) {\r\n console.log("IE Detected!");\r\n jQuery("body").prepend(\'<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning: Internet Explorer is not supported. Please upgrade to a more modern browser.\');\r\n }\r\n }\r\n <\/script>\r\n <script>\r\n var isMobileWidth = false;\r\n\r\n let Keyboard = window.SimpleKeyboard.default;\r\n\r\n let keyboard = new Keyboard({\r\n onChange: function(input) {\r\n onChange(input)\r\n },\r\n onKeyPress: function(button) {\r\n onKeyPress(button)\r\n },\r\n physicalKeyboardHighlight: true,\r\n maxLength: 70,\r\n mergeDisplay: true,\r\n onInit: function() {\r\n $(\'body\').addClass(\'keyboard-shown\');\r\n //$(".simple-keyboard-input").focus();\r\n },\r\n layout: null,\r\n display: {}\r\n });\r\n\r\n resizeHandler();\r\n\r\n function onChange(input) {\r\n if (!window.skTagline) {\r\n window.skTagline = document.querySelector(\'.tagSndLine\').textContent;\r\n }\r\n document.querySelector(".tagSndLine").textContent = input || window.skTagline;\r\n console.log("Input changed", input);\r\n }\r\n\r\n function onKeyPress(button) {\r\n console.log("Button pressed", button);\r\n\r\n if (button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}" || button === "{shift}" || button === "{lock}") handleShift();\r\n if (button === "{numbers}" || button === "{abc}") handleNumbers();\r\n\r\n if ($(\'.dot_icon\').hasClass(\'circ_animate\')) {\r\n $(\'.dot_icon\').removeClass(\'circ_animate\');\r\n }\r\n }\r\n\r\n function handleShift() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let shiftToggle = currentLayout === "default" ? "shift" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: shiftToggle\r\n });\r\n }\r\n\r\n function handleNumbers() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: numbersToggle\r\n });\r\n }\r\n\r\n\r\n document.addEventListener(\'keydown\', function(e) {\r\n if (e.key === "Tab") {\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n window.addEventListener(\'resize\', resizeHandler);\r\n window.addEventListener(\'orientationchange\', resizeHandler);\r\n\r\n function resizeHandler() {\r\n if (window.innerWidth <= 850) {\r\n if (!isMobileWidth) {\r\n isMobileWidth = true;\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'q w e r t y u i o p\',\r\n \'a s d f g h j k l\',\r\n \'{shiftleft} z x c v b n m {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'shift\': [\r\n \'Q W E R T Y U I O P\',\r\n \'A S D F G H J K L\',\r\n \'{shiftleft} Z X C V B N M {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'numbers\': [\r\n "1 2 3",\r\n "4 5 6",\r\n "7 8 9",\r\n "{abc} 0 {backspace}",\r\n ]\r\n },\r\n display: {\r\n "{numbers}": "123",\r\n "{ent}": "return",\r\n "{escape}": "esc ⎋",\r\n "{tab}": "tab ⇥",\r\n "{backspace}": "⌫",\r\n "{capslock}": "caps lock ⇪",\r\n "{shiftleft}": "⇧",\r\n "{shiftright}": "shift ⇧",\r\n "{controlleft}": "ctrl ⌃",\r\n "{controlright}": "ctrl ⌃",\r\n "{altleft}": "alt ⌥",\r\n "{altright}": "alt ⌥",\r\n "{metaleft}": "cmd ⌘",\r\n "{metaright}": "cmd ⌘",\r\n "{abc}": "ABC"\r\n }\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard");\r\n mobileDisableInput();\r\n }\r\n } else {\r\n if (isMobileWidth) {\r\n isMobileWidth = false;\r\n\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'` 1 2 3 4 5 6 7 8 9 0 - = {backspace}\',\r\n \'{tab} q w e r t y u i o p [ ] \\\\\',\r\n \'{capslock} a s d f g h j k l ; \\\' {enter}\',\r\n \'{shiftleft} z x c v b n m , . / {shiftright}\',\r\n \'.com @ {space}\'\r\n ],\r\n \'shift\': [\r\n \'~ ! @ # $ % ^ & * ( ) _ + {backspace}\',\r\n \'{tab} Q W E R T Y U I O P { } |\',\r\n \'{capslock} A S D F G H J K L : " {enter}\',\r\n \'{shiftleft} Z X C V B N M < > ? {shiftright}\',\r\n \'.com @ {space}\'\r\n ]\r\n },\r\n display: {}\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard or type to start");\r\n allowInput();\r\n }\r\n }\r\n }\r\n\r\n function mobileDisableInput() {\r\n\r\n if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {\r\n //document.querySelector(".simple-keyboard-input").setAttribute("readonly", "true");\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: false\r\n });\r\n\r\n $(\'body\').addClass("mobile");\r\n } else {\r\n $(\'body\').removeClass("mobile");\r\n }\r\n }\r\n\r\n function allowInput() {\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: true\r\n });\r\n }\r\n <\/script>',sidebarHtml:"",vars:{footerRight:"‎"}},{site:PRSSConfig}));ReactDOM.render(PRSSElement,document.getElementById("root"));</script><script>if(location.pathname.includes("blog")){document.body.classList.add("post-body");const n=PRSS.getItemChildrenBySlug("blog"),e=PRSS.getComponent("header"),t=PRSS.getComponent("footer"),i=PRSS.getProp("item");PRSS.appendToHead(e.headHtml),PRSS.appendToHead(t.headHtml),"/blog/"===location.pathname?(PRSS.setContent("div.app",`\n <header>${e.content}\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}\n \n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\n \n \n \n \n <div class="article-content">\n ${i.content}\n \n \n \n \n \n <footer>${t.content}\n `,!0),PRSS.setContent(".blog-articles",`\n ${n.map(n=>`\n <div class="blog-article">\n <a href="${n.url}">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}">\n <h4 class="article-title">\n ${n.title}\n \n <div class="article-content">\n ${n.content}\n \n \n \n `).join("")}\n `)):PRSS.setContent("div.app",`\n <header>${e.content}\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}\n \n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\n \n \n \n \n <div class="featured-image" style="${i.vars.featuredImageUrl?`background-image: url(${i.vars.featuredImageUrl})`:""}">\n <div class="article-content">\n ${i.content}\n \n \n \n \n \n <footer>${t.content}\n `,!0)}else{let n=PRSS.getProp("item").content;if(n.includes("{{blogArticles}}")){const e=PRSS.getItemChildrenBySlug("blog");n=n.replace("{{blogArticles}}",`\n <div class="blog-articles">\n ${e.map(n=>`\n <div class="blog-article">\n <a href="${n.url}" target="_blank">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}">\n <h4 class="article-title">\n ${n.title}\n \n <div class="article-content">\n ${n.content}\n \n \n \n `).join("")}\n \n `)}PRSS.setContent("body",n)}</script><script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><script src="../index.js"></script><!-- Scripts --><script src="https://cdn.jsdelivr.net/npm/twemoji@11.3.0/2/twemoji.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script><script src="../assets/js/jquery.min.js"></script><script>if(jQuery){var isIE=!1,ua=window.navigator.userAgent,old_ie=ua.indexOf("MSIE "),new_ie=ua.indexOf("Trident/");(old_ie>-1||new_ie>-1)&&(isIE=!0),isIE&&(console.log("IE Detected!"),jQuery("body").prepend('<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning: Internet Explorer is not supported. Please upgrade to a more modern browser.'))}</script><script>var isMobileWidth=!1;let Keyboard=window.SimpleKeyboard.default,keyboard=new Keyboard({onChange:function(e){onChange(e)},onKeyPress:function(e){onKeyPress(e)},physicalKeyboardHighlight:!0,maxLength:70,mergeDisplay:!0,onInit:function(){$("body").addClass("keyboard-shown")},layout:null,display:{}});function onChange(e){window.skTagline||(window.skTagline=document.querySelector(".tagSndLine").textContent),document.querySelector(".tagSndLine").textContent=e||window.skTagline,console.log("Input changed",e)}function onKeyPress(e){console.log("Button pressed",e),"{shiftleft}"!==e&&"{shiftright}"!==e&&"{capslock}"!==e&&"{shift}"!==e&&"{lock}"!==e||handleShift(),"{numbers}"!==e&&"{abc}"!==e||handleNumbers(),$(".dot_icon").hasClass("circ_animate")&&$(".dot_icon").removeClass("circ_animate")}function handleShift(){let e="default"===keyboard.options.layoutName?"shift":"default";keyboard.setOptions({layoutName:e})}function handleNumbers(){let e="numbers"!==keyboard.options.layoutName?"numbers":"default";keyboard.setOptions({layoutName:e})}function resizeHandler(){window.innerWidth<=850?isMobileWidth||(isMobileWidth=!0,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["q w e r t y u i o p","a s d f g h j k l","{shiftleft} z x c v b n m {backspace}","{numbers} {space} {ent}"],shift:["Q W E R T Y U I O P","A S D F G H J K L","{shiftleft} Z X C V B N M {backspace}","{numbers} {space} {ent}"],numbers:["1 2 3","4 5 6","7 8 9","{abc} 0 {backspace}"]},display:{"{numbers}":"123","{ent}":"return","{escape}":"esc ⎋","{tab}":"tab ⇥","{backspace}":"⌫","{capslock}":"caps lock ⇪","{shiftleft}":"⇧","{shiftright}":"shift ⇧","{controlleft}":"ctrl ⌃","{controlright}":"ctrl ⌃","{altleft}":"alt ⌥","{altright}":"alt ⌥","{metaleft}":"cmd ⌘","{metaright}":"cmd ⌘","{abc}":"ABC"}}),mobileDisableInput()):isMobileWidth&&(isMobileWidth=!1,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["` 1 2 3 4 5 6 7 8 9 0 - = {backspace}","{tab} q w e r t y u i o p [ ] \\","{capslock} a s d f g h j k l ; ' {enter}","{shiftleft} z x c v b n m , . / {shiftright}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {backspace}","{tab} Q W E R T Y U I O P { } |",'{capslock} A S D F G H J K L : " {enter}',"{shiftleft} Z X C V B N M < > ? {shiftright}",".com @ {space}"]},display:{}}),allowInput())}function mobileDisableInput(){/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?(keyboard.setOptions({physicalKeyboardHighlight:!1}),$("body").addClass("mobile")):$("body").removeClass("mobile")}function allowInput(){keyboard.setOptions({physicalKeyboardHighlight:!0})}resizeHandler(),document.addEventListener("keydown",(function(e){"Tab"===e.key&&e.preventDefault()})),window.addEventListener("resize",resizeHandler),window.addEventListener("orientationchange",resizeHandler);</script></body></html>
Simple-keyboard is a fast, dependency-free and customizable virtual keyboard for rich and snappy web applications.\n \n Features\n \n Supports React without the need for extra plugins.\n Many options and methods to enhance customization.\n Flex-box layout for easy styling.\n Supports Modules such as Autocorrect, Input Mask, among others.\n Ability to style a group of buttons independently, for advanced layouts.\n Great for all types of apps (Kiosks, gamepad-controlled apps, etc).\n Multi-keyboard instance support.\n Ready to use implementation demos.\n And more.\n \n \n\n \n Supported Languages\n \n Arabic\n Burmese\n Chinese\n Czech\n English\n French\n Georgian\n German\n Hebrew\n Hindi\n Italian\n Japanese\n Kannada\n Korean\n Russian\n Sindhi\n Spanish\n Thai\n Turkish\n Ukrainian\n Urdu\n \n \n \n \n \n \n\n\n <div class="footer"><a href="https://prss.io" class="d-flex align-items-center footer-shoutout" target="_blank" rel="noopener"><span>Website Powered by <span class="prss-logo-wrapper"><img class="prss-footer-image mx-1" src="data:image/png;base64,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" width="15"> PRSS\n \n\n\n\n\n\n\n\n ',template:"post",updatedAt:1715388556372,createdAt:1714781141844,vars:{}},rootPath:"../",headHtml:'<title>%item.title% - %site.title%\n<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"><\/script>\n\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">\n<meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM.">\n<meta name="author" content="Francisco Hodge">\n<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png">\n<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png">\n<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png">\n<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png">\n<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png">\n<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png">\n<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png">\n<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png">\n<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png">\n<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png">\n<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png">\n<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png">\n<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png">\n<link rel="manifest" href="/assets/img/ico/manifest.json">\n<meta name="msapplication-TileColor" content="#ffffff">\n<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">\n<meta name="theme-color" content="#ffffff">\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="mobile-web-app-capable" content="yes">\n<title>Simple-keyboard - The Modern Javascript Virtual Keyboard\n<meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard">\n<meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more.">\n<meta name="twitter:card" content="summary_large_image">\n<meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png">\n<meta property="og:url" content="https://virtual-keyboard.js.org">\n<meta property="og:site_name" content="simple-keyboard">\n<meta name="twitter:image:alt" content="Simple-keyboard">\n<link rel="stylesheet" href="/assets/css/fonts.css">\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n<link rel="stylesheet" href="https://unpkg.com/simple-keyboard@latest/build/css/index.css">\n<link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet">\n<link rel="stylesheet" href="/assets/css/main.css"><noscript>\n <link rel="stylesheet" href="/assets/css/noscript.css">\n\n<link href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">\n<link rel="stylesheet" href="/assets/css/font-awesome.min.css">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">\n<link rel="stylesheet" href="../index.css" /><style>\r\n body {\r\n background-color: #282c34;\r\n color: #212529;\r\n }\r\n',footerHtml:'<script>\r\n if (location.pathname.includes("blog")) {\r\n document.body.classList.add("post-body");\r\n const n = PRSS.getItemChildrenBySlug("blog"),\r\n e = PRSS.getComponent("header"),\r\n t = PRSS.getComponent("footer"),\r\n a = PRSS.getProp("item");\r\n\r\n PRSS.appendToHead(e.headHtml);\r\n PRSS.appendToHead(t.headHtml);\r\n\r\n if ("/blog/" === location.pathname) {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}\r\n \r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\r\n \r\n \r\n \r\n \r\n <div class="article-content">\r\n ${a.content}\r\n \r\n \r\n \r\n \r\n \r\n <footer>${t.content}\r\n `, true);\r\n\r\n PRSS.setContent(".blog-articles", `\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}">\r\n <h4 class="article-title">\r\n ${n.title}\r\n \r\n <div class="article-content">\r\n ${n.content}\r\n \r\n \r\n \r\n `).join("")}\r\n `)\r\n } else {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}\r\n \r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\r\n \r\n \r\n \r\n \r\n <div class="featured-image" style="${a.vars.featuredImageUrl ? `background-image: url(${a.vars.featuredImageUrl})` : ""}">\r\n <div class="article-content">\r\n ${a.content}\r\n \r\n \r\n \r\n \r\n \r\n <footer>${t.content}\r\n `, true)\r\n }\r\n } else {\r\n const n = PRSS.getProp("item");\r\n\r\n let content = n.content;\r\n\r\n if (content.includes("{{blogArticles}}")) {\r\n const n = PRSS.getItemChildrenBySlug("blog");\r\n content = content.replace("{{blogArticles}}", `\r\n <div class="blog-articles">\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}" target="_blank">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}">\r\n <h4 class="article-title">\r\n ${n.title}\r\n \r\n <div class="article-content">\r\n ${n.content}\r\n \r\n \r\n \r\n `).join("")}\r\n \r\n `)\r\n }\r\n\r\n PRSS.setContent("body", content);\r\n }\r\n<\/script>\r\n<script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><\/script><script src="../index.js"><\/script> \x3c!-- Scripts --\x3e\r\n <script src="https://cdn.jsdelivr.net/npm/twemoji@11.3.0/2/twemoji.min.js" crossorigin="anonymous"><\/script>\r\n <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"><\/script>\r\n <script src="../assets/js/jquery.min.js"><\/script>\r\n\r\n <script>\r\n if (jQuery) {\r\n var isIE = false;\r\n var ua = window.navigator.userAgent;\r\n var old_ie = ua.indexOf(\'MSIE \');\r\n var new_ie = ua.indexOf(\'Trident/\');\r\n\r\n if ((old_ie > -1) || (new_ie > -1)) {\r\n isIE = true;\r\n }\r\n\r\n if (isIE) {\r\n console.log("IE Detected!");\r\n jQuery("body").prepend(\'<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning: Internet Explorer is not supported. Please upgrade to a more modern browser.\');\r\n }\r\n }\r\n <\/script>\r\n <script>\r\n var isMobileWidth = false;\r\n\r\n let Keyboard = window.SimpleKeyboard.default;\r\n\r\n let keyboard = new Keyboard({\r\n onChange: function(input) {\r\n onChange(input)\r\n },\r\n onKeyPress: function(button) {\r\n onKeyPress(button)\r\n },\r\n physicalKeyboardHighlight: true,\r\n maxLength: 70,\r\n mergeDisplay: true,\r\n onInit: function() {\r\n $(\'body\').addClass(\'keyboard-shown\');\r\n //$(".simple-keyboard-input").focus();\r\n },\r\n layout: null,\r\n display: {}\r\n });\r\n\r\n resizeHandler();\r\n\r\n function onChange(input) {\r\n if (!window.skTagline) {\r\n window.skTagline = document.querySelector(\'.tagSndLine\').textContent;\r\n }\r\n document.querySelector(".tagSndLine").textContent = input || window.skTagline;\r\n console.log("Input changed", input);\r\n }\r\n\r\n function onKeyPress(button) {\r\n console.log("Button pressed", button);\r\n\r\n if (button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}" || button === "{shift}" || button === "{lock}") handleShift();\r\n if (button === "{numbers}" || button === "{abc}") handleNumbers();\r\n\r\n if ($(\'.dot_icon\').hasClass(\'circ_animate\')) {\r\n $(\'.dot_icon\').removeClass(\'circ_animate\');\r\n }\r\n }\r\n\r\n function handleShift() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let shiftToggle = currentLayout === "default" ? "shift" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: shiftToggle\r\n });\r\n }\r\n\r\n function handleNumbers() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: numbersToggle\r\n });\r\n }\r\n\r\n\r\n document.addEventListener(\'keydown\', function(e) {\r\n if (e.key === "Tab") {\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n window.addEventListener(\'resize\', resizeHandler);\r\n window.addEventListener(\'orientationchange\', resizeHandler);\r\n\r\n function resizeHandler() {\r\n if (window.innerWidth <= 850) {\r\n if (!isMobileWidth) {\r\n isMobileWidth = true;\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'q w e r t y u i o p\',\r\n \'a s d f g h j k l\',\r\n \'{shiftleft} z x c v b n m {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'shift\': [\r\n \'Q W E R T Y U I O P\',\r\n \'A S D F G H J K L\',\r\n \'{shiftleft} Z X C V B N M {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'numbers\': [\r\n "1 2 3",\r\n "4 5 6",\r\n "7 8 9",\r\n "{abc} 0 {backspace}",\r\n ]\r\n },\r\n display: {\r\n "{numbers}": "123",\r\n "{ent}": "return",\r\n "{escape}": "esc ⎋",\r\n "{tab}": "tab ⇥",\r\n "{backspace}": "⌫",\r\n "{capslock}": "caps lock ⇪",\r\n "{shiftleft}": "⇧",\r\n "{shiftright}": "shift ⇧",\r\n "{controlleft}": "ctrl ⌃",\r\n "{controlright}": "ctrl ⌃",\r\n "{altleft}": "alt ⌥",\r\n "{altright}": "alt ⌥",\r\n "{metaleft}": "cmd ⌘",\r\n "{metaright}": "cmd ⌘",\r\n "{abc}": "ABC"\r\n }\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard");\r\n mobileDisableInput();\r\n }\r\n } else {\r\n if (isMobileWidth) {\r\n isMobileWidth = false;\r\n\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'` 1 2 3 4 5 6 7 8 9 0 - = {backspace}\',\r\n \'{tab} q w e r t y u i o p [ ] \\\\\',\r\n \'{capslock} a s d f g h j k l ; \\\' {enter}\',\r\n \'{shiftleft} z x c v b n m , . / {shiftright}\',\r\n \'.com @ {space}\'\r\n ],\r\n \'shift\': [\r\n \'~ ! @ # $ % ^ & * ( ) _ + {backspace}\',\r\n \'{tab} Q W E R T Y U I O P { } |\',\r\n \'{capslock} A S D F G H J K L : " {enter}\',\r\n \'{shiftleft} Z X C V B N M < > ? {shiftright}\',\r\n \'.com @ {space}\'\r\n ]\r\n },\r\n display: {}\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard or type to start");\r\n allowInput();\r\n }\r\n }\r\n }\r\n\r\n function mobileDisableInput() {\r\n\r\n if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {\r\n //document.querySelector(".simple-keyboard-input").setAttribute("readonly", "true");\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: false\r\n });\r\n\r\n $(\'body\').addClass("mobile");\r\n } else {\r\n $(\'body\').removeClass("mobile");\r\n }\r\n }\r\n\r\n function allowInput() {\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: true\r\n });\r\n }\r\n <\/script>',sidebarHtml:"",vars:{footerRight:"‎"}},{site:PRSSConfig}));ReactDOM.render(PRSSElement,document.getElementById("root"));</script><script>if(location.pathname.includes("blog")){document.body.classList.add("post-body");const n=PRSS.getItemChildrenBySlug("blog"),e=PRSS.getComponent("header"),t=PRSS.getComponent("footer"),i=PRSS.getProp("item");PRSS.appendToHead(e.headHtml),PRSS.appendToHead(t.headHtml),"/blog/"===location.pathname?(PRSS.setContent("div.app",`\n <header>${e.content}\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}\n \n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\n \n \n \n \n <div class="article-content">\n ${i.content}\n \n \n \n \n \n <footer>${t.content}\n `,!0),PRSS.setContent(".blog-articles",`\n ${n.map(n=>`\n <div class="blog-article">\n <a href="${n.url}">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}">\n <h4 class="article-title">\n ${n.title}\n \n <div class="article-content">\n ${n.content}\n \n \n \n `).join("")}\n `)):PRSS.setContent("div.app",`\n <header>${e.content}\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}\n \n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125">\n \n \n \n \n <div class="featured-image" style="${i.vars.featuredImageUrl?`background-image: url(${i.vars.featuredImageUrl})`:""}">\n <div class="article-content">\n ${i.content}\n \n \n \n \n \n <footer>${t.content}\n `,!0)}else{let n=PRSS.getProp("item").content;if(n.includes("{{blogArticles}}")){const e=PRSS.getItemChildrenBySlug("blog");n=n.replace("{{blogArticles}}",`\n <div class="blog-articles">\n ${e.map(n=>`\n <div class="blog-article">\n <a href="${n.url}" target="_blank">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}">\n <h4 class="article-title">\n ${n.title}\n \n <div class="article-content">\n ${n.content}\n \n \n \n `).join("")}\n \n `)}PRSS.setContent("body",n)}</script><script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><script src="../index.js"></script><!-- Scripts --><script src="https://cdn.jsdelivr.net/npm/twemoji@11.3.0/2/twemoji.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script><script src="../assets/js/jquery.min.js"></script><script>if(jQuery){var isIE=!1,ua=window.navigator.userAgent,old_ie=ua.indexOf("MSIE "),new_ie=ua.indexOf("Trident/");(old_ie>-1||new_ie>-1)&&(isIE=!0),isIE&&(console.log("IE Detected!"),jQuery("body").prepend('<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning: Internet Explorer is not supported. Please upgrade to a more modern browser.'))}</script><script>var isMobileWidth=!1;let Keyboard=window.SimpleKeyboard.default,keyboard=new Keyboard({onChange:function(e){onChange(e)},onKeyPress:function(e){onKeyPress(e)},physicalKeyboardHighlight:!0,maxLength:70,mergeDisplay:!0,onInit:function(){$("body").addClass("keyboard-shown")},layout:null,display:{}});function onChange(e){window.skTagline||(window.skTagline=document.querySelector(".tagSndLine").textContent),document.querySelector(".tagSndLine").textContent=e||window.skTagline,console.log("Input changed",e)}function onKeyPress(e){console.log("Button pressed",e),"{shiftleft}"!==e&&"{shiftright}"!==e&&"{capslock}"!==e&&"{shift}"!==e&&"{lock}"!==e||handleShift(),"{numbers}"!==e&&"{abc}"!==e||handleNumbers(),$(".dot_icon").hasClass("circ_animate")&&$(".dot_icon").removeClass("circ_animate")}function handleShift(){let e="default"===keyboard.options.layoutName?"shift":"default";keyboard.setOptions({layoutName:e})}function handleNumbers(){let e="numbers"!==keyboard.options.layoutName?"numbers":"default";keyboard.setOptions({layoutName:e})}function resizeHandler(){window.innerWidth<=850?isMobileWidth||(isMobileWidth=!0,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["q w e r t y u i o p","a s d f g h j k l","{shiftleft} z x c v b n m {backspace}","{numbers} {space} {ent}"],shift:["Q W E R T Y U I O P","A S D F G H J K L","{shiftleft} Z X C V B N M {backspace}","{numbers} {space} {ent}"],numbers:["1 2 3","4 5 6","7 8 9","{abc} 0 {backspace}"]},display:{"{numbers}":"123","{ent}":"return","{escape}":"esc ⎋","{tab}":"tab ⇥","{backspace}":"⌫","{capslock}":"caps lock ⇪","{shiftleft}":"⇧","{shiftright}":"shift ⇧","{controlleft}":"ctrl ⌃","{controlright}":"ctrl ⌃","{altleft}":"alt ⌥","{altright}":"alt ⌥","{metaleft}":"cmd ⌘","{metaright}":"cmd ⌘","{abc}":"ABC"}}),mobileDisableInput()):isMobileWidth&&(isMobileWidth=!1,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["` 1 2 3 4 5 6 7 8 9 0 - = {backspace}","{tab} q w e r t y u i o p [ ] \\","{capslock} a s d f g h j k l ; ' {enter}","{shiftleft} z x c v b n m , . / {shiftright}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {backspace}","{tab} Q W E R T Y U I O P { } |",'{capslock} A S D F G H J K L : " {enter}',"{shiftleft} Z X C V B N M < > ? {shiftright}",".com @ {space}"]},display:{}}),allowInput())}function mobileDisableInput(){/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?(keyboard.setOptions({physicalKeyboardHighlight:!1}),$("body").addClass("mobile")):$("body").removeClass("mobile")}function allowInput(){keyboard.setOptions({physicalKeyboardHighlight:!0})}resizeHandler(),document.addEventListener("keydown",(function(e){"Tab"===e.key&&e.preventDefault()})),window.addEventListener("resize",resizeHandler),window.addEventListener("orientationchange",resizeHandler);</script></body></html>