# Input does not work on mobile devices

**URL:** <https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660>\
**Category:** Coding Questions\
**Created:** [November 20, 2019, 2:28pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660 "2019-11-20T14:28:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![CodingIsLife](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Post date:** [November 20, 2019, 2:28pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/1 "2019-11-20T14:28:04Z")

</div>

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

```auto
var inputBox;
function setup() {
	noCanvas();
	inputBox = createInput();
	inputBox.size(200,50);
}

```

This is the index.html :-

```auto
<html>
<head>
  <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>
</head>

<body>
</body>
</html>

```

And this is the link for my github page :-  
[https://irtiaz-kabir.github.io/Test/](https://irtiaz-kabir.github.io/Test/)

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

Please solve my problem.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 21, 2019, 3:19am UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/2 "2019-11-21T03:19:48Z")

</div>

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

[https://www.w3schools.com/tags/tag\_input.asp](https://www.w3schools.com/tags/tag_input.asp)  
[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) ,

from p5.js might first look at a example  
[https://p5js.org/reference/#/p5/createInput](https://p5js.org/reference/#/p5/createInput)  
using this i made  
[https://editor.p5js.org/kll/sketches/493e00kRN](https://editor.p5js.org/kll/sketches/493e00kRN)  
what works well on my tablet, try it.

---

<div class="post-metadata">

**Author:** ![CodingIsLife](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Post date:** [November 21, 2019, 7:47am UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/3 "2019-11-21T07:47:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 21, 2019, 8:00am UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/4 "2019-11-21T08:00:17Z")

</div>

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  
[https://editor.p5js.org/kll/sketches/h53BeOPNU](https://editor.p5js.org/kll/sketches/h53BeOPNU)

---

<div class="post-metadata">

**Author:** ![CodingIsLife](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Post date:** [November 21, 2019, 3:24pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/5 "2019-11-21T15:24:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 21, 2019, 11:16pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/6 "2019-11-21T23:16:29Z")

</div>

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

did you test my complete sketch code under your environment?

```auto
var inputBox;

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

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

function draw() {
  background(200,200,0);
}

```

as i see  
[https://irtiaz-kabir.github.io/Test/](https://irtiaz-kabir.github.io/Test/) sketch.js is unchanged?

you want to tell me that that [github.io/Test/](http://github.io/Test/) is your working environment?

---

<div class="post-metadata">

**Author:** ![CodingIsLife](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Post date:** [November 22, 2019, 11:01am UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/7 "2019-11-22T11:01:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 22, 2019, 11:17am UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/8 "2019-11-22T11:17:21Z")

</div>

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

[https://editor.p5js.org/kll/sketches/493e00kRN](https://editor.p5js.org/kll/sketches/493e00kRN)

and ( get keyboard ) and type in some text.

 ![Screenshot_2019-11-22-18-28-20](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9bfb50478999dbc7cadba8f41ad3e8d6c26c5fbb.png)

* * *

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…

---

<div class="post-metadata">

**Author:** ![CodingIsLife](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Post date:** [November 23, 2019, 3:11pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/9 "2019-11-23T15:11:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 23, 2019, 10:17pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660/10 "2019-11-23T22:17:50Z")

</div>

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

[https://github.com/Irtiaz-Kabir/Test/blob/gh-pages/sketch.js](https://github.com/Irtiaz-Kabir/Test/blob/gh-pages/sketch.js) ,  
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 [github.io](http://github.io) i don’t know )  
but for YOU i tested it ( latest code version ) here on my node server

 ![node_p5js_dom_textinput](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8228d959f191dc792fcde858fa55f15d3830a699.png)

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

```auto
var inputBox;
var mytext="";

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

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

function draw() {
  background(200,200,0);
  textSize(30);
  text(mytext,10,height/2);
}

```

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

```auto
<!DOCTYPE html>
<html>
  <head>
    <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">
  </head>
  <body>
    <script src="sketch3.js"></script>
  </body>
</html>

```

* * *

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.