Input does not work on mobile devices

I have a very simple p5 sketch that is running in my desktop computer pretty well. But when I hosted that with github pages just to see if it works on mobile devices I found it not working properly. I had just a single input box created in my sketch.

This is the sketch.js : -

var inputBox;
function setup() {
	inputBox = createInput();

This is the index.html :-

  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" src="libraries/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>


And this is the link for my github page :-

When I run this in my mobile or tab and tap on the input field it never focuses.

Please solve my problem.

yes, i see that on my tablet too.

in other words you not use p5.js,

just to make a html input element.
so you need learn HTML ,

from p5.js might first look at a example
using this i made
what works well on my tablet, try it.

What about other input events? For example : createSelect() which creates < select > tag elements or buttons? If I put them over the canvas will they all work?

This issue needs to be solved in the later versions of p5 js.

hm, actually i not see a issue,

and the DOM.position() over canvas was a independent but not related information
you could test in under 30 sec by using //
but it does get essential for the fullscreen canvas users.

just stay more close to examples
a mayor reason to use the online editor OR the PDE / p5.js Mode.
instead try it with manual coding of HTML / sketch.js
from what environment?

more to DOM elements

I tried your suggestion. I took my input box on the canvas. But it did not work. I am hosting it with github pages. That might cause the problem

above i told you that the position should be unrelated to your problem.

did you test my complete sketch code under your environment?

var inputBox;

function setup() {
  createCanvas(400, 400);
  inputBox = createInput();
  inputBox.size(200, 20);
  //inputBox.position(10,10); //__ put it over canvas

function myInputEvent() {
  console.log('log: ', this.value());

function draw() {

as i see sketch.js is unchanged?

you want to tell me that that is your working environment?

I launched and hosted another webpage through github following your suggestion. I wrote your code (Except for the console log statement. Because I don’t know how it could help a mobile phone user). I still could not focus on the input box.

Is it a problem of github pages?
How did you run the sketch on mobile phone? What I do for that is to host my page with github page

i still can call my ( similar modified ) sketch
on a android tablet browser ( Android version 5.1 // Chrome version 78.0.3904.96 )

and ( get keyboard ) and type in some text.

i give you that link already, and expected that you tested that on your device
( and report if it works for you or not )
but you just ask back about ? other input events?
so i could assume it worked.

you can work in every environment you want,
but if you have p5.js questions here at the forum
i recommend you make a account at the online editor
and link to your code in question here, so we see code / result / can play with it…

1 Like

Okay, now you are talking about some p5 js editor link!
When I am going to host my webpage I surely won’t want to share a editor link!
You should test hosting it by github pages and after testing that I found it did not work.
So as I have intentions to host a page you should tell me a solution for doing so

-a- as i say, for talking with us here
the online editor is best to show your
MVCE in question.

-b- and you still not confirm if my code works in your environment or not
and give a link to it? ,
is definitely the not working old one

-c- yes, understand that the final code will / has to / run on your webserver
( if that can be i don’t know )
but for YOU i tested it ( latest code version ) here on my node server

for understand the environment:
++ a raspberry pi 3B+ board / Raspbian / node express app installation
++ a sketch3.js with the content from my online editor link

var inputBox;
var mytext="";

function setup() {
  createCanvas(400, 100);
  inputBox = createInput();
  inputBox.size(200, 20);
  //inputBox.position(2,height-28); //__ put it over canvas

function myInputEvent() {
  //console.log('log: ', this.value());
  mytext = this.value();

function draw() {

++ a local “example3.html” file from the test environment

<!DOCTYPE html>
    <script src="javascripts/p5.js"></script>
    <script src="javascripts/p5.dom.min.js"></script>
    <script src="javascripts/p5.sound.min.js"></script>
    <link rel='shortcut icon' href="images/favicon.ico" type='image/x-icon' />
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
    <meta charset="utf-8">
    <script src="sketch3.js"></script>

the picture you see is called that sever page from a win10 PC in same network
and make a snapshot.

sure also tested that page from my Android tablet.