I've got some Javascript code that I have written which captures both keyboard and mouse events. The idea is that whenever I tap on an element (a TD) on the page it gets selected (basically I just change the class so it is highlighted), and I can use the arrow keys to change which element is selected.
However, when I view this page on the stock android browser on my phone (running Gingerbread), the browser eats all the events and my page is non-functional. Specifically, when I tap on an item on the page I see an orange colored rounded box surrounding the text, and my page does not get the event. When I hit the up and down arrow key, the box moves, but my code is not doing this, it appears to be something the browser is doing.
I suspect that what is happening is that the browser is trying to be "helpful" somehow. What I'm looking for is some way to give the browser a hint to not do this, or otherwise disable this behavior.
Update: Here is a more specific example of the problem I am seeing. I set up the following simple listener just to see what key code correspond to various keys:
document.onkeydown = function(evt) {
alert(evt.which)
}
Now, if the cursor is in a TextField and I hit the enter key on my phone, the alert pops up and says "13". BUT if I move focus away to another element (in this case a TD), when I hit enter, NOTHING HAPPENS.
Update: I have tried installing a half dozen different browsers. They all seem to swallow up the arrow keys (this is a physical keyboard on the device) and use them to scroll the screen around or to highlight different elements on the page, instead of passing the event to my web app so it can actually use them to do what I want to do! The only browser I have seen that does not do this is Firefox, which seems to just silently ignore them completely.
Related
I have added skip to main content links on header in my web app. It works as expected in Windows and MacOS. It even works as expected in IPhone. But the same is not working in Android chrome/talk back.
when I check further, This skip nav links are not working even in webaim.org . The code I refer https://www.bignerdranch.com/blog/web-accessibility-skip-navigation-links/
Could someone please help why android chrome is having this issue? Is it a browser behavior? Please help.
Let's analyze what is happening in this scenario.
1) TalkBack sets ACCESSIBILITY_FOCUS to the element
This is very important, notice that this says ACCESSIBILITY_FOCUSnot FOCUS. For a hidden skipnav link to become visible it needs to get FOCUS as marking the element as visible (or perhaps shifting it on screen) with the :focus pseudo selector is a very common implementation of this. It's very important that such a control receives FOCUS, which it never does with TalkBack.
2) The user double taps to click the element they just heard get focus.
When the user activates the control a physical click event is set to the middle of the onscreen focus rectangle for the control. Similar to actually touching the screen.
3) The browser sees a physical click event occur on the page.
TalkBack essentially has blindly sent a mouse down event to an area of the page that has nothing or perhaps another control overlayed with this invisible element. Either way, the thing that the browser wanted to click was never "visible" because it never properly obtained FOCUS only ACCESSIBILITY_FOCUS and so the control is not there to be clicked.
In my Codename One app I have 2 Forms A & B. A Form includes a MapContainer updated every 10 s and a floating button. If the user clicks on the floating button, they can take a picture and then a Dialog is shown and if they choose "OK" the B Form is shown :
new B_Form(theme).show(); // (where theme is the Resources used in A Form).
This B Form includes buttons to take some action (ie record audio, play the recorded audio, go to Form A). The buttons work in the simulator (although recording is not supported so an error is shown but it is expected), that is the user can click on it.
However on an actual device (Android KitKat) B Form is shown but no action can be taken although the buttons are all enabled. The buttons even don't show their "pressed style" when being pressed, and remain in "unselected state".
The only button that works is the setBackCommand from the Toolbar (ie the left arrow on the upper left corner of the screen).
So it looks like the B Form was not taken into account. Moreover if I swipe my finger on the B Form then A Form is shown and the map is moved. If I removed the MapContainer from the A Form then B Form works as expected on the device.
EDIT
Surprisingly enough if I call a Form C from the side menu bar via the hamburger menu, the buttons on that Form C work seamlessly!
So I get the feeling that the MapContainer is causing me trouble, what can I do to make B Form work as expected ?
Any help appreciated,
Regards,
The MapContainer is a peer component, we enabled the new peers on Android which hide some of the complexities of the peer system but might trigger other issues.
This might be a misbehavior of the peer component system, although it's hard for me to understand how to reproduce this. The side menu would work because the side menu is a completely different form without the map container in it.
So here is the workaround I found.
Before showing Form B, I removed the MapContainer and revalidated the Form A :
googleMap.remove(); // googleMap is my MapContainer defined somewhere else
this.revalidate();
Although it works I still don't understand why the problem described in the question happens.
I have an Android app using PhoneGap 1.6 and Sencha Touch 1.1.1. One view has a text input field which behaves oddly in Android: it duplicates itself and it is very difficult to remove focus.
I have determined that it is a WebTextView coming up over top of the "real" input field. The problem I am having with this is that blurring the text field with screen taps is extremely difficult, and if you scroll the parent container, the WebTextView does not scroll with it, so you can see both at the same time.
The only way to remove focus on the element is to tap furiously all over parts of the screen, much like triggering the frustration detector from Mavis Beacon.
My actual question is: how can I turn off this functionality completely, or at least work around it? It is not reasonable to expect the user to do anything other than single-tap outside of the box, or press the Back button on the device to stop input in the text field. As it is, pressing Back simply stows the soft keyboard and does not give up focus.
These are browser bugs, triggered by some CSS-flags.
To explain the bug:
The device creates some kind of "screenshot" from the web-sites content. All transformations and transitions are made on top of the "screenshots" from the actual page.
If you have input elements, there will be some kind of proxy elements rendered on top of the "screenshot". Sometimes the are these proxy-elements at the wrong position.
This happens, if you trigger the website to be hardware-accelerted. You have to drop some CSS-definitions:
transform(), translate(), transform3d(), translate3d().
The Bad news are:
You cannot solve this problem, because it a bug within the browser.
I have some different android devices, all have different problems, one fix will break another device.
I think the bug will never be solved, because noone cares about the embedded browser since android 4.1 and the chrome.
If you can disble hardware accelertion, this may help.
The good news are:
There are rumors about an embeddable chrome-webview.
I started to write some blogposts about "the new IE":
http://christian-kuetbach.de/blog/post/14
I am writing a PhoneGap app on Android. I am trying to stay pure HTML+CSS+JS, without calling specific PhoneGap APIs. So the app is somewhat an embedded web page, more or less.
The page has some "buttons" on it, which are actually table cells with some CSS attributes (among which cursor: pointer) and an onClick function.
I have noticed that when I touch a button, it "flashes" for a second or so, then its corresponding action is performed. By the way, I don't like this very much, since it causes a delay in the UI.
Some of the "buttons" activate a menu. I handle the menu by making visible a semi-opaque black div that covers the whole screen, and above it a centered div containing a table containing the menu items. (the black div and the centered div are hidden, normally).
The problem is that when I touch a menu item, it does not flash; one of the underlying buttons flashes instead (that is, one of those that at the moment are covered by the semi-opaque black div, and are supposed to be inactive). Nevertheless, the correct action is performed, in other words the onClick function of the menu item gets called, not the one of the flashing button .
So my question is two-fold:
1) Is there a simple way to make the right item flash (I mean the menu item instead of the underlying, semi-covered button)?
2) Is there a simple way to totally disable button flashing, so that the UI would speed-up and problem 1 be solved too?
Many thanks
You should be using the touch events, which are supported on Android WebKit. This will prevent the select + touch behaviour that you're seeing on your HTML elements that the onClick event causes.
Android versions past Android 1.5 support touch events such as touchstart and touchend. I recommend using them, and reading Apple's documentation (yes, I know it's weird, but Google's Web App documentation is still poor with respect to touchevents.)
The home screen of my Android application has three EditText views, meant to be used as three different search functions, each with a "Search" button.
The app works perfectly on the device (G1) when using the trackball: I can move between the EditTexts with the trackball, all the events fire as expected, I can enter text using the physical keyboard in the selected EditText, Enter correctly submits the proper search, etc.
etc.
However, I can't switch between the EditText views using touches - only by using the trackball. Touches seem to be completely ignored by the EditText. Touches do fire for the buttons, but very hard - takes a lot of tries to make a touch register.
In the simulator, clicking on any EditText does nothing - the first one always remains selected, and I never get a soft keyboard.
This is all inside a TabHost - I've read there are some problems with that configuration, but it sounds like a slightly different issue (the EditText doesn't seem to lose focus - everything works perfectly with the trackball).
Any suggestions for what I can check?
It sounds like your touch targets are too small. I would suggest adding some padding to each of your EditTexts, or using a TouchDelegate to increase the size of the touch target.
Ah, I figured it out.
I had a ListView left in my layout from when I first set up the TabHost. Since it didn't show anything on the screen, and it was at the bottom of my layout file after everything else, I didn't notice it... Just noticed it didn't belong there and erased it, and all the controls started behaving properly.
D'oh.