Hi friends, I’m designing a presentation for an interactive Panel. In this case, I won’t have a physical Keyboard or mouse to enter data. The majority of the screens are moved by touching the screen. I only have one screen where I need to collect information from the user. In this case, is there a way to bring a virtual keyboard using code so the user can enter the desired information? I have a sample attached here. My plan is to have the information entered by the user sent through email when the button is touched. Can you please give me a hand on this one?
Please check your device’s settings again to see if it has a function that displays the system’s virtual keyboard when the user taps the text entry. This could be the best and simplest solution to your problem.
If your device appears to lack this feature, you can try using the VirtualKeyboard API: Chrome Developers have complete control over the VirtualKeyboard API.
Kindly note that only Chromium-based browsers (Chrome, Edge, etc.) currently support this. We’re not sure if it will work on your device, so please give it a try.
If the first two methods do not work, you can try looking for a JavaScript lib to create a virtual keyboard. To do that, follow the steps below:
Looking for a JavaScript lib.
Create a folder that contains a HTML file and the JavaScript file of that lib.
Insert a dummy web object into ActivePresenter, select that folder as a package, export to HTML5. After that, you go to the resources view to see the path to the JS file.
I found a library. The files are attached here. But I could not understand what else to do. I tried to follow your explanation but it didn’t work. Can you please test it for me?
Here is where I got it: https://codepen.io/dcode-software/pen/KYYKxP
A simple keyboard library like yours can be added directly into ActivePresenter without using a dummy web object. Please add an Execute JavaScript action to the slide On Load event and do as follows in the script editor:
Copy/paste the keyboard JavaScript
Copy/paste the keyboard CSS and add script to load it
Add script to initialize the keyboard
// the keyboard JS
// ...
// the keyboard CSS
var css = `
the keyboard CSS styles go here
`;
// load above styles
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
// your keyboard lib also uses a Google font, load it here
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
document.head.appendChild(link);
// initialize the keyboard (depending on each keyboard lib)
$('textarea').addClass('use-keyboard-input');
Keyboard.init();
Now I can modify the keyboard keys to make it more complete. I really appreciate your help. I believe I can finish my project now. I was afraid I would need to stop it. Thanks again! I am really happy about your help!
Best Regards!
Deni.
Do you think it would be a good idea to be added to the next version of Active Presenter? A Virtual Keyboard. What do you think?
Regarding the idea to add a virtual keyboard, I’m afraid that this feature doesn’t receive much interest from ActivePresenter users.
I’m not sure what device you’re using, but the operating system of a touch device should show a virtual keyboard, or at least have an option to show it when a text entry is focused.
Hi Toan, let me explain to you. The device I’m programming for is a touchscreen viewboard. Here is the model I’m using:
The system itself has a virtual keyboard. But it works only for the onboard programs. If I want to run a different program using Html5 presentations, It should be run with a mini PC using the monitor only as interface displaying. So technically, I’m programming my presentation for a Windows 11 mini PC. I realized that I could use the windows 11 virtual keyboard. The problems with that are:
1- I don’t want the user to have access to the pc’s desktop area or taskbar (on the bottom of the desktop). It would be too risky.
2- The virtual keyboard that comes available with the of windows 11 is too big and would cover a good portion of my slides during the presentation.
3- I haven’t found any software that would prevent me to access the desktop area and/or would provide me with a decent virtual keyboard. So this is why I like the idea of a JavaScript-generated keyboard.
But I’m open to any other solutions anyone may have.