Mobile keyboard (Android IPhone) has no tab button. That is why native application go to next field when enter is pressed. However browser forms are submitted when enter is pressed.
How can I solve this problem?
Use tabindex properly and it should work just like with native applications.
By the way, on Android at least, native apps don't have to do anything special to get this behavior (at most they have to specify nextFocusForward, if the layout is too complicated and Android can't figure that out by itself).
I assume you're talking about the on-screen keyboard. iPhone will show Previous | Next as a keyboard accessory in web forms. Android will too.
If they don't then something might be wrong with your markup. Is it possible for you to post your form HTML code?
I would also say that nLL's suggestion is correct. It will make it feel more polished.
since you are targeting high-end phones you can handle enter key with simple JavaScript
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Related
Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one
https://github.com/eforerog/keyboardMobileWebGLUnity
which displayed an error when pressed on and this one
https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!
Any ideas, please?
I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.
These plugins don't work:
https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix
This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:
https://github.com/unity3d-jp/WebGLNativeInputField
And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.
https://github.com/kou-yeung/WebGLInput
And there is a fix for Unity 2021 for it:
https://github.com/kou-yeung/WebGLInput/releases/tag/1.0
There's a keyboard that overlays, when using it you just need to tap the notification to access it and then click the "back" button to hide it https://play.google.com/store/apps/details?id=com.fishstix.gameboard
I made this project that simply recreates a keyboard using buttons in unity.
I implemented it in a WebGL build successfully.
https://github.com/thetimeste/WebGL-Build-Keyboard-Unity.git
I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.
Create a .jslib file that has a function opening a window.prompt(description, currentText)
Return the result at the end of that function back to a unity object with a recipient script
Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.
That's it. The result should look something like in this demo: https://pop.demo.neoludic.games
If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input
I also need to enable mobile virtual keyboard for running webgl on mobile device.
I've tried the code from your mentioned url. It gives you some idea on how to do
it, but the code are totally buggy and unusable. Now I am trying to implement it
by myself.
I've successfully implemented native HTML5 Drag and Drop for moving HTML elements inside a page (just, say, a div from one place to another, nothing related to interacting with the host OS' files whatsoever). This works fine in Chrome and Safari on a PC but I can't start a drag operation in my iPad's Safari.
I've found this so far:
Using Drag and Drop From JavaScript
Safari, Dashboard, and WebKit-based
applications include support for
customizing the behavior of drag and
drop operations within your HTML
pages.
Note: This technology is supported
only on desktop versions of Safari.
For iPhone OS, use DOM Touch,
described in Handling Events (part of
Safari Web Content Guide) and Safari
DOM Additions Reference.
Here. But it's outdated (2009-06-08).
Doe's anyone know if it is possible to use native HTML5 in Mobile Safari? (I don't want javascript-framework like solutions like jQuery UI).
Thanks!
I've just been trying to get native drag&drop working in ios safari (ipad pro with 14.0.1), and I'm updating this answer as it kept coming up as my first google result (and no other q&a seems to be up to date).
Following https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
I have found native html5 drag&drop now works in safari, with a few specific notes;
You MUST set some data in OnDragStart's event; (the effect settings seem to be optional) Event.dataTransfer.setData('text/plain', 'hello');
you MUST Event.preventDefault(); in OnDrop otherwise safari will load the data you added (unless that's your intention)
OnDragOver event handler needs Event.preventDefault(); otherwise drop fails (unless intended, as docuemnted)
On ios safari, if you set OnDragStart's Event.dataTransfer.dropEffect='copy' and in OnDragOver's Event.dataTransfer.dropEffect='link' the drop fails (no OnDrop()); Seems to be the only combination that fails
I thought you required
CSS -webkit-user-drag: Element; and `-webkit-user-drop: element;
or if you prefer
Element.style.setProperty('webkitUserDrag','element');
Element.style.setProperty('webkitUserDrop','element');
but it seems just the usual draggable attribute is enough
Element.setAttribute('draggable',true);
This seems to be the bare minimum to drag & drop an element
Element.setAttribute('draggable',true);
function OnDragOver(Event)
{
Element.setAttribute('DragOver',true);
Event.stopPropagation(); // let child accept and don't pass up to parent element
Event.preventDefault(); // ios to accept drop
Event.dataTransfer.dropEffect = 'copy';// move has no icon? adding copy shows +
}
function OnDragLeave(Event)
{
Element.removeAttribute('DragOver');
}
function OnDrop(Event)
{
Element.removeAttribute('DragOver');
Event.preventDefault(); // dont let page attempt to load our data
Event.stopPropagation();
}
function OnDragStart(Event)
{
Event.stopPropagation(); // let child take the drag
Event.dataTransfer.dropEffect = 'move';
Event.dataTransfer.setData('text/plain', 'hello');
}
Element.addEventListener('dragstart',OnDragStart);
Element.addEventListener('drop',OnDrop);
Element.addEventListener('dragover',OnDragOver);
Element.addEventListener('dragleave',OnDragLeave);
Touch events do work now on Safari too (including Mobile). This article has nice code snippets that you can start from:
http://www.html5rocks.com/en/mobile/touch/
I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}
Hey, I was wondering how to set the focus to a text box in Mobile Safari.
I've tried document.myForm.myTextArea.focus() which works in regular Safari, but it does not seem to work in Mobile Safari.
To clarify, I want to set focus to a text box as soon as the user loads a page, and have the iPhone keyboard pop up.
Just found this previous post stating this is a bug in webkit. Sorry for not doing a more thorough search.
http://discussion.forum.nokia.com/forum/showthread.php?t=127724
I found a bug report with the iUI project relating to this.
It seems that a focus() call will not work if called from the onload event or if called via a timer.
http://code.google.com/p/iui/issues/detail?id=129
Update: Although I have no source for this, I am told (by people who have tried it) that in iPhone OS 4 the problem with focus() and onload should be fixed.
Nothing to do with the timer, focus() doesnt work at all... im doing mine through an AJAX function. i guess my web application will have to suffer in mobile safari.
Bye the way, this also affects HP webOS devices and any other device using mobile safari
I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:
body.fullscreen #home .info {
display: none;
}
What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.
This ought to be really, really easy, so I must just be missing something obvious.
I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.
Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:
alert($("body").attr("class"));
I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?
Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:
if (window.navigator.standalone) {
alert ('Thanks for launching this app your home screen')
} else {
alert('Add this app to your home screen for the best experience')
}