Мобильная версияI have a p5 sketch which is a small eye-spy game. It includes a leaderboard where the user can input their name. When I test on android mobile browsers(chrome and Firefox), this input behaves strangely. For example, upon clicking the input, the keyboard appears but a user can not type at all. Or alternatively, upon clicking the input, the keyboard will appear but the cursor does not appear in the input box unless the user taps it again, in which case they can type, but sometimes letters will be dropped, and upon submitting, the value of the input box is undefined, null or empty.
Other issues also appear after the user submits using the button below the input, namely the input box and button do not disappear, and as I said the leaderboard does not display the name which the player input as the value of the input element was undefined.
None of these problems appear in mobile safari or on desktop browsers, as far as I can tell.
The code to the project is here: https://github.com/bee-mcc/SpyDay
Specifically, I render the input element (and define the behavior when the user types) in this code block:
function displayWinScreen() { saveUserPlayedToSessionStorage(); hasPlayedInThisSession = true; clear(); background(color(0, 100, 0)); // Darker green background // fill(255); noLoop(); const myInput = createInput(); const myButton = createButton('Go to leaderboard'); const finishedInputFunc = async function (event) { event.preventDefault(); await insertData(seconds, myInput.value()); isShowingLeaderBoard = true; myInput.remove(); myButton.remove(); loop(); }; myButton.elt.addEventListener('click', finishedInputFunc); myInput.elt.addEventListener('keyup', function onEvent(e) { if (e.keyCode === 13) { finishedInputFunc(); } }); const onInput = function () { let userInput = this.value(); if (userInput.length > 3) { this.value(userInput.slice(0, 3)); } else { this.value(userInput); } }; myInput.input(onInput); textAlign(CENTER, CENTER); if (xScrollingIsEnabled) { strokeWeight(0); textSize(baseTextSize + 4); text('
YOU WON!!', window.innerWidth / 2, 175); … myInput.position(window.innerWidth / 2 - 75, 520); myButton.position(window.innerWidth / 2 - 55, 570); … ); } There are some areas of my code which, upon researching this issue, look like they could cause some problems. I will list them here:I run this right when my sketch.js script starts
//prevents the mobile browser from processing some default // touch events, like swiping left for "back" or scrolling the page. document.ontouchmove = function (event) { event.preventDefault(); }; These are the functions which p5.js allows me to define to listen to various touch and mouse events, which i think could interfere with the input element’s event listeners.
function touchStarted() { setMouseLocationWithinImage( xScrollingIsEnabled, yScrollingIsEnabled ); } function touchMoved() { isScrolling = true; if (previousMouseX < mouseX ?? touches[0].x) { const isOffsetXTooSmall = offsetX < 1; offsetX = isOffsetXTooSmall ? offsetX : offsetX - 10; } if (previousMouseX > mouseX ?? touches[0].x) { const isOffsetXTooLarge = offsetX >= canvasWidth - window.innerWidth; offsetX = isOffsetXTooLarge ? offsetX : offsetX + 10; } if (previousMouseY < mouseY ?? touches[0].y) { const isOffsetYTooSmall = offsetY < 1; offsetY = isOffsetYTooSmall ? offsetY : offsetY - 10; } if (previousMouseY > mouseY ?? touches[0].y) { const isOffsetYTooLarge = offsetY >= canvasHeight - window.innerHeight; offsetY = isOffsetYTooLarge ? offsetY : offsetY + 10; } previousMouseX = mouseX ?? touches[0].x; previousMouseY = mouseY ?? touches[0].y; } function touchEnded() { console.log('firing', frameCount); if (isScrolling) { isScrolling = false; return; } if ( frameCount >= loadingFrames && !isAnswerLoading && !hasUserPlayedToday() ) { if (gameStarted) { checkAnswer(); } else { startGame(); } } if (hasUserPlayedToday()) { return true; } else { return false; } } You can test the project here: https://spyday.nochillzone.games
I tried reducing the scope of the project dramatically, so that the sketch was literally just a text box centered on the screen, and as expected this did not present any problem on Firefox android mobile browser. Therefore, as expected, the problem should be with my code.
I expect the input element to work exactly like it does on iOS: the user can tap to focus, is able to type immediately without any “buggy” behavior (no text being lost, one letter is typed and the appears in the input element, etc), and the value of the input element when the user is finished typing should be defined. Moreover, I want the button and input element to disappear when the user submits their name.
Источник: https://stackoverflow.com/questions/781 ... droid-mobi
