<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery virtual_keyboard.js Playground</title> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link href="../assets/plugins/jquery.virtual_keyboard/jquery.virtual_keyboard.css" rel="stylesheet" type="text/css"/> <style> body { overflow-x:hidden;} h1 { margin:150px auto 30px auto; text-align:center;} </style> </head> <body><div id="jquery-script-menu"> <div class="jquery-script-center"> <ul> <li><a href="http://www.jqueryscript.net/other/Customizable-Virtual-Keyboard-With-jQuery-Bootstrap.html">Download This Plugin</a></li> <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li> </ul> <div class="jquery-script-ads"><script type="text/javascript"><!-- google_ad_client = "ca-pub-2783044520727903"; /* jQuery_demo */ google_ad_slot = "2780937993"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div class="jquery-script-clear"></div> </div> </div> <h1>jQuery virtual_keyboard.js Playground</h1> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-6"> <textarea id="example-2" class="form-control" rows="3" placeholder="Type something..."></textarea> </div> <div class="col-md-3 col-lg-offset-1" id="mio" style=" border:2px solid #51668c; padding-bottom: 5px; margin-left: 8.3%;"> <h4 class="bg-primary col-lg-offset-1 col-sm-10">Configuration Options:</h4> <form class="form-horizontal"> <div class="form-group"> <label for="themeSelect" class="col-sm-2 control-label">Theme</label> <div class="col-sm-8"> <select class="form-control" id="themeSelect"> <option value="default" selected>Default (Apple iOS)</option> <option value="monokai">Monokai</option> <option value="orange">Orange</option> </select> </div> </div> <div class="form-group"> <label for="typeSelect" class="col-sm-2 control-label">Type</label> <div class="col-sm-8"> <select class="form-control" id="typeSelect"> <option value="gatekeeper" selected>Default (Gatekepper)</option> </select> </div> </div> <div class="form-group"> <label for="languageSelect" class="col-sm-2 control-label">Language</label> <div class="col-sm-8"> <select class="form-control" id="languageSelect"> <option value="en_US" selected>Default (en_US)</option> <option disabled value="ru_RU">ru_RU</option> <option disabled value="es_ES">es_ES</option> <option disabled value="pt_PT">pt_PT</option> <option disabled value="it_IT">it_IT</option> </select> </div> </div> <div class="form-group"> <label for="openSpeedInput" class="col-sm-2 control-label">Open Speed</label> <div class="col-sm-8"> <input class="form-control" id="openSpeedInput" placeholder="" type="number" min="100" max="2000" step="100"> </div> </div> <div class="form-group"> <label for="closeSpeedInput" class="col-sm-2 control-label">Close Speed</label> <div class="col-sm-8"> <input class="form-control" id="closeSpeedInput" placeholder="" type="number" min="100" max="2000" step="100"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10 "> <div class="checkbox"> <label> <input type="checkbox" id="enabledCheck"> Hide Keyboard </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10 "> <div class="checkbox"> <label> <input type="checkbox" id="hiddenCheck"> Show Keyboard </label> </div> </div> </div> </form> <button type="button" id="buttom1" class="btn-success btn">Trigger</button> </div> </div> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="../assets/plugins/jquery.virtual_keyboard/jquery.virtual_keyboard.js" type="text/javascript"></script> <script> jQuery(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); $('textarea').keyboard({ //theme: 'default', //is_hidden: false, //close_speed: 1000, //enabled: false, //layout: 'en_US', // definimos un trigger al keyboard. // Al hacer click sobre el selector que tenga el id (#) o la clase (.) definida // se ocultara o mostrara el keyboard segun corresponda. trigger: '#buttom1' }); // Guardo en la variable 'keyboard' (puede ser cualkier otro nombre), la instancia del plugin creada, // para asi acceder a los metodos publicos del plugin var keyboard = $('textarea').data('pluginKeyboard'); // A partir de aqui inicializo los valores del cajon de 'Configuration Options' que vemos, // para que los campos tengan los valores con los que se creo la instancia del plugin. $('#hiddenCheck').attr('checked', !keyboard.getHidden()); // CheckBox k oculta o muestra el keyboard $('#openSpeedInput').val(keyboard.getOpenSpeed()); // Valor en milisegundos de la velocidad con que se muestra el keyboard $('#closeSpeedInput').val(keyboard.getCloseSpeed()); // Valor en milisegundos de la velocidad con que se oculta el keyboard keyboard.SubmitKey = function(){ // Definimos que accion realizar al presionar la tecla 'Submit'. alert('Presionada la tecla Enter'); }; // Cambiamos el tema del teclado de acuerdo al valor que este seleccionado en el campo 'Select' del Tema. // De momento solo tres temas, estoy trabajando en mejorarlos y agregar 2 temas más. $('#themeSelect').change(function(){ $(this).find(':selected').each(function () { keyboard.setTheme($('#themeSelect').val()); }) }); // Definimos que al hacer click en el checkbox de 'Habilitar Keyboard' se bloquee o desbloquee el keyboard $('#enabledCheck').change(function(){ keyboard.setEnabled(!keyboard.getEnabled()); }); // Definimos que al hacer click en el checkbox de 'Mostrar Keyboard' se muestro u oculte el keyboard $('#hiddenCheck').change(function(){ keyboard.setHidden($(this).is(':checked')); }); // Cambiamos la velocidad con que se muestra el keyboard al cambiar el valor del campo 'Open Speed', el valor esta en milisegundos $('#openSpeedInput').change(function(){ keyboard.setOpenSpeed($(this).val()); }); // Cambiamos la velocidad con que se oculta el keyboard al cambiar el valor del campo 'Close Speed', el valor esta en milisegundos $('#closeSpeedInput').change(function(){ keyboard.setCloseSpeed($(this).val()); }); }); </script> <!-- END JAVASCRIPTS --> </body> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </html>