Develop Reference

How do I disable text composition in an html textarea when on android?

I am using the input event on a textarea to apply some logic that mutates the value of the textarea. This works as expected in local dev environment in a browser.
However, my target platform is android. On this platform, I'm noticing that instead of event.inputType being insertText, sometimes it is insertCompositionText. Android is apparently trying to be efficient by not actually mutating the textarea's value until you press space. How can I disable this behavior?
I found someone in a similar situation here who tried to use blur and focus events quickly. I can't use this because (1) it's hacky, hope there is a better solution (2) it resets the cursor position and degrades the user experience.
For reference, using ionic vue, but this is just an html <textarea>:
<textarea v-model="input" #input="onInput" />
onInput(event) {
console.log("onInput", event);
//more logic
}

You can't. That behavior comes from the keyboard, which is a separate app on Android. Not implementing the composing text functionality correctly will likely screw it up, breaking autocomplete, tap to correct, and the delete key, which all behave much differently due to composing text. It might even break normal typing- the idea of composing text is that it's temporary until you make it permanent. If so, when it does autocorrect on space it would assume the old stuff is deleted and recommit the entire word, causing duplication.

I was able to handle this issue by adding a hidden password input and route all the focus, events and value of my text input to the password input
The browsers will not show any predictive for password inputs and no insertCompositionText anymore

How do allow spaces in textinput.number in Flutter?

In TextInput.number, although I add space in the RegExp in FilteringTextInputFormatter, my iPhone or the simulator for the matter does not show the space in the keyboard for me to press. It only shows numbers. Is there a workaround or is there another input type I should be using?

On Android, TextInputType.number provides you with the space button (looks a bit like an underscore).

Android Keyboard with number and decimal for LG G4

I am using the following element in the Android EditText, to have a keyboard with number and decimal for displaying a keyboard layout for amount input (for eg 22.12).
android:inputType="numberDecimal"
It is working for all devices, like Samsung, Nexus, Sony etc.
The keyboard layout looks like below.
The keyboard layout on the LG G4 looks like below.
Could anyone please help, how to have decimal keyboard for the LG G4. I have already tried the android:inputType="phone", still same issue.
I would like to stick to the decimal input, as it would not be very nice to have a full alpha-numeric keyboard, to enter amount.
Thanks in advance.

UPDATE
It seems that flag signed is not needed after all to get decimal separator, It was actually the TYPE_TEXT_FLAG_NO_SUGGESTIONS that messed up the keyboard so do not use it with number input types. Also noticed that LG keyboard looks different depending on if you set the input type from code vs. XML
END UPDATE
It seems like the combination of inputType and digits solves the problem. I have a class that extends EditText so I initialize the EditText like this:
setKeyListener(DigitsKeyListener.getInstance("0123456789.,"));
setRawInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL | InputType.TYPE_NUMBER_FLAG_SIGNED);
I guess that because LG has bundled decimal separator and minus sign in a same button you have to configure both feature on and then disable "-" by not including it in digits.

There are 2 possible ways i can think of, but i do not have an LG make phone, so i personally couldn't test any of these. But still its worth a shot.
Try to give the input type as android:inputType="phone".
Saw this on the dev site, more details here https://developer.android.com/training/keyboard-input/style.html#Type
This one i tried a couple of years back, it worked for me, but my case was different. Specify an attribute in your EditText item in xml.
android:digits="0123456789."
What it does is, sets the view to accept numeric input and only the specific items mentioned in the digits attribute. I personally do not use it much, its more of a hack than a solution, but it gets things done. More info on the below link:
https://developer.android.com/reference/android/widget/TextView.html
Try these out, hope they help for all cases.

wild scroll input android

I am working on a responsive website, which has a different stylesheet for either mobile or desktop. Everything looks nice and works great, until text inputs are interacted with on mobile. They show up as they should. But once clicked (ehrm.. touched), I found that the browser in Android starts scrolling like crazy, and the same happens when typing. The text is entered in the input, though, and the soft keyboard/focus on the input is not lost.
My project can be found over here: http://www.gortzfruit.nl/new/
The problem is that I have been searching for a solution for a while now, and found similar issues of which the solutions were not working out for me. Some topics -and solutions- I have been looking into were:
https://github.com/scottjehl/Device-Bugs/issues/3
-Here it is suggested that the problem lies within positioned elements. Especially absolute within fixed positioned elements. This is recurring in my design, but once removed it did not solve the problem.
Android Browser textarea scrolls all over the place, is unusable
-This one suggests that the problem is with the css-properties -webkit-transform: translate3d(0, 0, 0); and -webkit-backface-visibility: hidden;. I did not include these by myself, but I thought a Google Maps API I included might use these. I found that they don't use it either, after analyzing the markup Google Maps API produces.
How can I prevent wild scrolling when a fixed position text input form field gains focus? -This one is focused on trying to cope with the problem. Setting the body to overflow:hidden; was suggested to block scrolling while being focused, but it did not work for me.
disable scrolling on input focus in javascript
-Here it is suggested that returning false on keydown might solve the problem, which I tried with no success. This one block my text from being actually entered in the input.
I know this is related to the bug in Android which causes this weird scrolling. But I don't know anymore how to cope with this. For me it does not matter whether I find out how to avoid the bug or whether I find a hack to make the bug unnoticable. I just want to get rid of the weird scrolling behavior while typing and focussing/blurring on textboxes.
Thanks in advance,
Jeroen

Remove the meta viewport tag from your markup and add this immediately after the opening body tag:
<script type="text/javascript">
<!--
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
//-->
</script>
This will give you the best experience on mobile (amazing image rendering too!). I noticed on my device (which isn't Android) I had some weird scrolling/zooming issues and this eliminates that. Let me know if it works :)

Printing arabic strings in android

In my application I need to add some string to a list and print them back. Problem is when I print them I can see the letters has inter change whithing the word.The word is in Arabic. (before 4.2 android doesnt support natively for Arabic).
What I tried was using several Arabic rendering classes such as fursi class and Arabi utility class. Nothing is helped me.
Here is the word ٣.. ما زاد على actually this part ٣.. should be the first it always goes to right as I have shown. Is there way to solve this thing. this is the one and only bug to hold the application to add to market :(

Oh, ouch! Arabic is worse than Hebrew in this aspect because Arabic has its own digits! Right!
I once had a similar problem on Windows, with symbols that weren't treated exactly as Hebrew but also not exactly as non-Hebrew. The only way I found to fix this was to split the string into two - print the problematic symbols (your 300) and then print the rest of the string.
I thought that with Unicode things has gotten better. I guess not always.
UPDATE: In a comment you said the translation of the string was 3.. . In Arabic, zero and a dot look very similar (which is why I confused a dot with a zero). Perhaps the person responsible of the input typed it wrong, not being fluent in Arabic, as well? 3.. doesn't make a lot of sense (3. does, and so does 300, but 3.. ?). Check the input, it might be wrong, and that can confuse the layout algorithm.

I can't technically understand the reason behind my action to correct above issue. However this is it . ` I reverse the word and separated letters by "+" and added to the list.It is amazing !