# Very simple virtual keyboard

**URL:** <https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412>\
**Category:** General\
**Created:** [27 October 2023 20:21 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412 "2023-10-27T20:21:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jttjtt](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@jttjtt](https://discourse.nodered.org/u/jttjtt)\
**Post date:** [27 October 2023 20:21 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/1 "2023-10-27T20:21:59Z")

</div>

I am programming a simple aplication for parking lot, where I need the user to write car plate number. So i was searching for a very simple on-screen keyboard, where will be English Letters, Numbers, maybe space bar and thats all.

I have found this keyboard:  
[https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51](https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51)

I have only two problems:

- I Was not able to modify it, so the keyboard will be always visible on page
- I do not need the keyboard to show the input on its top, I just need it to put the letters where the cursor is

Or maybe do you know some even more simple solution for this?

Thanks for help.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 October 2023 20:47 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/2 "2023-10-27T20:47:35Z")

</div>

If you can tell the browser (I assume that the screen input device is operating in a Kiosk mode?) that it is a touch screen and can constrain the cursor to the input field, the devices touch screen keyboard should display automatically shouldn't it?

I remember seeing something on MDN for `input` that lets you give a hint to the browser.

---

<div class="post-metadata">

**Author:** ![jttjtt](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@jttjtt](https://discourse.nodered.org/u/jttjtt)\
**Post date:** [27 October 2023 21:56 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/3 "2023-10-27T21:56:26Z")

</div>

Yes, there are such solutions, but with this type of keyboard i have this problem:

1. There is possibility to close the keyboard with some X
2. there is possibility to move the keyboard
3. there is possibility to switch the keyboard to some another mode, or another type of keyboard.

I want the keyboard to be in Node red, so I can disable all of the functions above... Or maybe if you know some SW, which can make on screen keyboard on Windows and I can set it up, so the points above will be solved...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 October 2023 22:30 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/4 "2023-10-27T22:30:19Z")

</div>

OK, well I'm not aware of anything but it shouldn't be too hard to work up with a set of buttons in a grid.

A quick search threw up some possibilities though:

[CSS Keyboards (freefrontend.com)](https://freefrontend.com/css-keyboards/)

[Virtual Keyboard using HTML5 CSS and JS | Codeconvey](https://codeconvey.com/virtual-keyboard-using-html5/)

---

<div class="post-metadata">

**Author:** ![JuanHull](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@JuanHull](https://discourse.nodered.org/u/JuanHull)\
**Post date:** [7 November 2023 06:47 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/5 "2023-11-07T06:47:59Z")

</div>

Creating a custom on-screen keyboard is a good approach for your parking lot application. It provides the flexibility to meet your specific needs. You can use HTML and JavaScript to build a simple keyboard and control its visibility and input behavior.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [7 November 2023 07:06 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/6 "2023-11-07T07:06:31Z")

</div>

I once upon a time wrote a browser app for a tennis court booking system. The club provided a local terminal (computer screen, mouse and keyboard) to allow players to make a local booking. This was long before we all had smart phones, the good old Nokia and Ericsson days

I used Visual Studio and C++ and I could magically make that app automatically start fullscreen at boot, I took away all possible ways to close, resize and minimize it. It worked rock-solid for several years until it was replaced by a more modern booking system

What I would do even today would be to build a strong gui like that and then have Node-RED as backend. If that is possible today by just using CSS, HTML and Javascript, fine, otherwise I would look into some modern Visual Studio tool just to create the front end.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 November 2023 10:18 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/7 "2023-11-07T10:18:17Z")

</div>

And, of course, UIBUILDER would be a great tool for helping build a solid, performant custom UI. 😀

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [7 November 2023 11:31 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/8 "2023-11-07T11:31:36Z")

</div>

Yes of course, that is the modern way you would do it!!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 January 2024 11:31 UTC](https://discourse.nodered.org/t/very-simple-virtual-keyboard/82412/9 "2024-01-06T11:31:50Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.