Can I show the keyboard of a mobile device?

p5.js Beginners
1

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? :face_with_raised_eyebrow:

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?

2

Hi,

Welcome to the forum! :wink:

You can look at those threads :

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 :

3

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:

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 :smiling_face_with_tear:). 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!

1 Like
4

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

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()

1 Like
5

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(づ ●─● )づ