# Can I show the keyboard of a mobile device?

**URL:** <https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093>\
**Category:** Beginners\
**Created:** [December 9, 2020, 6:43pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093 "2020-12-09T18:43:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Filatov](https://avatars.discourse-cdn.com/v4/letter/f/e9bcb4/32.png) [@Filatov](https://discourse.processing.org/u/Filatov)\
**Post date:** [December 9, 2020, 6:43pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093/1 "2020-12-09T18:43:30Z")

</div>

I am developing an interface for the program, made a component for entering text. The PC version works fine. Is it possible to force the keyboard to open in a browser on a mobile device and read the key pressed?  
Is there such a possibility? 🤨

I ask for more help, the application is focused on computers, on the mobile version of the application the orientation interferes with the correct display. How do you solve these problems?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 9, 2020, 10:00pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093/2 "2020-12-09T22:00:50Z")

</div>

Hi,

Welcome to the forum! 😉

You can look at those threads :

> <https://stackoverflow.com/questions/6837543/show-virtual-keyboard-on-mobile-phones-in-javascript>

> **[Show virtual keyboard on mobile phones in javascript](https://www.xspdf.com/resolution/53201229.html)**

It seems that there’s not a direct way to open the virtual keyboard but `prompt()` might be the answer.

For your second question, it’s the role of CSS to organize the layout automatically. It’s called a responsive website. You can take look at that :

> **[Managing screen orientation](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)**
>
> Screen orientation is something slightly different than device orientation. Even if a device doesn't have the capacity to detect its own orientation, a screen always has one. And if a device is able to know its orientation, it's good to have the...

---

<div class="post-metadata">

**Author:** ![Bastilling](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@Bastilling](https://discourse.processing.org/u/Bastilling)\
**Post date:** [December 21, 2023, 10:07pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093/3 "2023-12-21T22:07:06Z")

</div>

Hey, I guess this answer is very late. But I just now encountered the same problem and this was the only p5 related post I could find. So for anyone having difficulties with this in the future:  
By the magic of github copilot I ended up with this solution:

```auto
function createUsernameInput(pos, size){
    window.usernameInput = createInput("USERNAME");
    window.usernameInput.position(pos.x - size.x/2, pos.y - size.y/2);
    window.usernameInput.size(size.x, size.y);
    window.usernameInput.mousePressed(() => {
        if(window.usernameInput.value() === "USERNAME")
            window.usernameInput.value("");
        window.usernameInput.elt.focus();
    });
    window.usernameInput.changed(() => {
        if(key === "Enter") {
            window.usernameInput.elt.blur();
        }
    });
    window.usernameInput.style('background-color', '#f4f4f4');

    // Set input text color and font size
    window.usernameInput.style('color', '#333');
    window.usernameInput.style('font-size', '16px');

    // Set input border style and radius
    window.usernameInput.style('border', '2px solid #aaa');
    window.usernameInput.style('border-radius', '5px');
    window.usernameInput.elt.style.textAlign = 'center';
}

```

This is just example code for a username text input but can obviously extended for any functionality. So don’t make the same mistake as me and write such a textInput yourself (and then feel like a fool 🥲). P5 already provides this functionality for you. I also suppose it is much easier to format and customize the looks of these html elements using style.css but this is a quick and dirty solution!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 22, 2023, 1:11pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093/4 "2023-12-22T13:11:48Z")

</div>

Instead of `window.`, create a local variable and `return` that at the end of your `function`: 💡

```auto
function createUsernameInput(pos, size) {
  const inp = createInput("USERNAME");

  inp.position(pos.x - size.x >> 1, pos.y - size.y >> 1).size(size.x, size.y);

  // ...

  inp.style('border', '2px solid #aaa').style('border-radius', '5px');

  //inp.elt.style.textAlign = 'center';
  inp.style('textAlign', 'center');

  return inp;
}

```

[**style()**](https://p5js.org/reference/#/p5.Element/style)

---

<div class="post-metadata">

**Author:** ![JeemzzFancier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeemzzfancier/32/19144_2.png) [@JeemzzFancier](https://discourse.processing.org/u/JeemzzFancier)\
**Post date:** [December 25, 2023, 1:40pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093/5 "2023-12-25T13:40:57Z")

</div>

Hello guys! I assume that you can have a glimpse into **Ketai** library which supports diverse mobile utilities including toggling your keyboard, drawing UI and many other functions. It certainly meets your need if your project is expected to simply run as an app on smart phones. However, it doesn’t help if you require a browser verson:( Good luck(づ ●─● )づ