I have a webview with a credit card entry form (with standard <input type="text" /> fields). In different versions of Android I get different keyboards. Kit-Kat seems to not show Prev / Next keys when inside the form.
On the web side, do I have any influence over this?
If not, what
should I recommend to the developer for the Android side?
Example without Prev / Next:
Same webview, with Prev / Next:
You can control the keyboard from the WebView, but as other answers suggest it may not work with every keyboard ever made. Despite that, I typically find most mainstream keyboards have implemented the behaviour I want.
The WebView has a method called onCreateInputConnection. You can hook into this method and add (and/or remove) flags to the inputType and/or imeOptions. There are many flags available to you.
Check out the EditorInfo options, in particular IME_FLAG_NAVIGATE_NEXT and IME_FLAG_NAVIGATE_PREVIOUS. See usage below (which removes the prev/next flags from the keyboard options):
#Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
InputConnection inputConnection = super.onCreateInputConnection(outAttrs);
outAttrs.imeOptions = outAttrs.imeOptions & ~EditorInfo.IME_FLAG_NAVIGATE_NEXT &
~EditorInfo.IME_FLAG_NAVIGATE_PREVIOUS;
return inputConnection;
}
Another thing you could try is to hide the entire suggestions bar using the InputType flags TYPE_TEXT_FLAG_NO_SUGGESTIONS. See example below (which adds the "no suggestions" flag to the input type):
#Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
InputConnection inputConnection = super.onCreateInputConnection(outAttrs);
outAttrs.inputType = outAttrs.inputType | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS;
return inputConnection;
}
There are many other flags available to have a play with to customise the IME directly from the WebView. Refer the developer to the linked pages and you should hopefully be able to achieve the behaviour you are after on most keyboards.
You do have some minimal control, but not that much. The type of the control (passowrd, numeric, text) will be sent to the soft keyboard and used to change how things are displayed. However, the choices the keyboard makes based on those options are keyboard specific- the Google keyboard reacts differently than Swype, which reacts differently than Swiftkey, which reacts differently than the Samsung keyboard, etc. You can't really count on a specific behavior.
Tried on Android Studio 3.0 (SDK API 26), the answer https://stackoverflow.com/a/23462658/3286489 crashes. After search further found this working.
#Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
InputConnection inputConnection = new BaseInputConnection(this, true);
outAttrs.imeOptions = outAttrs.imeOptions & ~EditorInfo.IME_FLAG_NAVIGATE_NEXT &
~EditorInfo.IME_FLAG_NAVIGATE_PREVIOUS;
return inputConnection;
}
And
#Override
public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
InputConnection inputConnection = new BaseInputConnection(this, true);
outAttrs.inputType = outAttrs.inputType | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS;
return inputConnection;
}
Related
1
Error:
I/TextInputPlugin(22952): Composing region changed by the framework. Restarting the input method.
W/IInputConnectionWrapper(22952): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(22952): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(22952): getTextAfterCursor on inactive InputConnection
Is anyone how to solve this?
use a TextEditingController() to store the value in the textfield controller.
and then call the text value using theController.text .
this error is due to the keyboard being manually closed, it causes a rebuild.
make sure you're doing this in a stateful widget.
check this image for a guide.
TextEditingController
When I open same application that is running on web I receives input key events from physical keyboard but when I run the same application on mobile then there is no keyboard open for taking input so that's why this is not generating key events? Is there any possibility to listen mobile keyboard event?
If you are using a RawKeyboardListener widget to listen to key presses, then it won't work for mobile, because as the name suggests, it listens to raw keybaord (hardware keyboard, not virtual). You can instead make use of this code (do import 'dart:ui' for accessing the window.onKeyData function, and then set it as you want):
#override
void initState() {
super.initState();
window.onKeyData = (KeyData keyData) {
// it can be any key you want, I'm using arrowUp here just as an example.
if (keyData.logical == LogicalKeyboardKey.arrowUp.keyId) {
// execute your method here for the pressed key
return true;
}
// The keyData will be given to other widgets such as textfields by flutter if you return false. Return false if your method is not executed till now, that is, when none of your conditions matches. I've saw this approach somewhere else on stackoverflow too, so don't have much idea about it either, but yeah, this is also a way that you can listen to keyboard presses.
return false;
};
}
There are some other options/packages too, you can check them out on pub.dev. A default alternative to RawKeyboardListener is just KeyboardListener. Also keep in mind to always wrap your whole Scaffold widget inside listeners widgets like the above (to get events of everything that falls under your Scaffold), otherwise it won't function as desired sometimes.
While changing keyboard type from TextInputType.text to TextInputType.phone inside Form receiving this error:
W/IInputConnectionWrapper(13712): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(13712): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(13712): getTextAfterCursor on inactive InputConnection
The widget is StatefulWidget
I don't think you can call them errors (or at least not breaking errors because they won't crash the app)
This long and still open issue on github addresses the problem and there seem to be no way to stop these warnings (until now) that are being caused by clearing the TextField
I am working on a mobile application that has a list of items, each of which contain toggle buttons. When the Accessibility (Voice over) mode is turned on, the focus on these list items is enabled but double-tapping the item does not turn ON/OFF the toggle button.
Here's the code sample that I am using. It reads the content but the on-tap or ng-click methods are not triggered.
The below code focuses on the item but when it is double tapped, the toggle does not turn ON/OFF. Same behavior is observed on iOS and Android. Any ideas?
HTML
<ion-list>
<ion-toggle role="option" toggle-class="toggle-balanced" ng-repeat=“item in items" tabindex="-1" ng-model="item.isToggleOn" ng-change=“item.isToggleOn" on-tap=“updateSettings(item)" aria-label=“Item description,, Double Tap to toggle setting." >
<div class="pref-item-text-wrap” >Item description</div>
</ion-toggle>
</ion-list>
In the Controller:
$scope.updateSettings = function (item) {
console.log("In update settings");
}
Heres a little hack to get it working.
In you SASS, after importing Ionic, you need to overwrite the pointer-events property of the toggle component:
// accessible toggles
.item-toggle {
pointer-events: all;
.toggle {
pointer-events: none;
}
}
Please note that this makes the toggle not react to click events unless you handle that event manually on item level, eg:
<ion-toggle role="checkbox" aria-checked="{{isChecked}}" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>
Events like gestures and keyboard events are intercepted by screen readers. You can use the correct roles to allow the screen reader to pass the appropriate event through to your JavaScript event handlers.
Also, note that when the screen reader is turned on, the gestures change. A single-tap becomes a double-tap on iOS and a double-tap becomes a triple-tap. See http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php
Similar changes happen on Android.
That being said, you have many things wrong with that little bit of code:
If the tabindex is -1, it will not be focusable for a keyboard-only user and is therefore not accessible by all users. You need to make sure that the tabindex is set to 0
The behavior you are describing is more akin to a checkbox or radio role than it is to an option. You should probably be using the checkbox role.
The parent of an option must be a listbox role as can be clearly seen in the spec http://www.w3.org/TR/wai-aria/roles#option, if you do use listbox in combination with option, you need to set aria-multiselectable to true
In any case, when you implement one of these roles, you must maintain the appropriate aria-* state properties and then you must use a device-independent event handler. You may have to use the ng-click in combination with ngAria to get the required behavior. Make sure that you test with a keyboard only and no screen reader (on Android) and with a keyboard and a screen reader (on iOS and Android) as well as touch and a screen reader (on iOS and Android).
This question already exists:
Closed 10 years ago.
Possible Duplicate:
in Chrome not getting an onClick() on a FocusPanel when focus was on a TextArea that has registered onChange and onBlur handlers
In my GWT app I register a BlurHandler on a TextArea so that I can save the changes and go from edit mode back to view mode if the focus moves elsewhere. This works, but also seems to defeat the effect of the event that moved the focus, at least on Chrome in devmode. For example, if the user clicks on an Anchor, the TextBox gets the onBlur() and then the Anchor does not get the onClick(); whereas before I registered the onBlur, the Anchor would get the onClick(). This seems to be quite reliable (again, in Chrome in devmode). I am being careful to not call event.stopPropagation() or event.preventDefault(). Any ideas how I can get the onBlur and also the onClick() ?
I had a similar issue. I was not able to track the source problem though. I did enable dev toolbar / firebug and set event breakpoints to test; it does look like the click event was not triggered after the blur action. After playing around for many hours (and I'm not quite sure what inspired me to try this), I dropped the onblur action in a timer with executed delay at about 300ms. That seemed to work for me. I think it might have something to do with the fact that my action slightly modified the page and visibility of items, witch re-rendered the page and I can only guess that the single-threaded browser model killed the click event which was not longer on the right area.
textBox.addBlurHandler(new BlurHandler()
{
#Override
public void onBlur(BlurEvent event)
{
Timer delayTimer = new Timer()
{
#Override
public void run()
{
//do stuff
}
};
delayTimer.schedule(300);
}
});
anchor.addClickHandler(....)