Develop Reference

React Material UI: Textfield maxLength not working in Android

I am using React Material UI and want to implement max length for a TextField component.
I tried to set max length in inputProps as below -
<TextField
id="name"
label="Name"
inputProps={{ maxLength: 5 }}
/>
This works in desktop browsers as expected, but doesn't seem to work in mobile devices browsers, expecially in most Android mobiles with Chrome latest version.
Not sure about IOS, as not tested in that environment.
Please refer the stackblitz here for reference.
To replicate, please open the above stackblitz in a mobile device browser prefebaly in Chrome.
I can go with regex, but I think setting up max length attribute to a field seems very clean and semantic.
Please let know if there is any way.

If your input filed type='number' then it will not work.
You can try this solution. I think it will work.
<TextField
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>

Enter event doesn't trigger the function on Android device using angular

There are multiple questions with answers related to my problem but unfortunately, none worked for me.
I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.
I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.
Here is what I am using.
HTML:
<mat-form-field class="ib-input-container-width">
<input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')" [formControl]="form.get('FirstName')" type="text" >
</mat-form-field>
<mat-form-field class="ib-input-container-width" >
<input #lastName id="lastName" matInput [formControl]="form.get('LastName')" type="text">
TS:
handleNext(elementId){
let nextElement = document.getElementById(elementId);
console.log(nextElement);
nextElement.focus();
}
onChange(event){
console.log(event.keycode);
}
PS: I am on a working progressive web app using Cordova.
Update
I have tried solution from https://stackoverflow.com/a/28103608/3081929
But ng-change doesn't work either.

the code looks correct,
before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder

Jquery masked Input v1.4 issue with Samsung Android device

I'm facing an issue with jquery-masked-input v1.4 plugin.
I have a input field:
<input type="text" id="phone" placeholder="(999) 999-9999" />
and have applied the mask to it:
<script>
$("#phone").mask("(999) 999-9999");
</script>
It works perfectly on all devices ranging from desktops, mobiles (all iphones, androids) except for Samsung Android Devices.
What it does on these devices is when I try entering the numbers, it would enter only one digit and immediately the text keypad would open. Then when I try entering the numbers again, it would not show properly. Eg.
I want to enter : (989) 942-0827
What I get : (898) ___-__9
and the text-keypad keep opening up while I try to enter the numbers.
Please suggest any workaround. Thanks in advance.

This is very old, but thought I would post anyway...
Im not 100% sure I understand your issue, but try changing the type to number. This should force the number pad at all times, and not show the text keyboard
<input type="number" id="phone" placeholder="(999) 999-9999" />

Equivalent of .iOS.createNavigationWindow in Android?

I am developed an app for iOS using Titanium. Now my idea is to try to port it to android devices.
I am finding lots of errors which I am solving as I go, but I don't seem to find the solution to this one.
My app for iOS uses createNavigationWindow to navigate through the whole app. Android don't like that command as it tells me it is undefined.
I been looking for an Android version of createNavigationWindow but can't find it.
Any tip in the right direction will be really appreciated.
Titanium SDK : 3.1.3
Android: 4.4
Thanks!

There is not a direct equivalent of NavigationWindow for Android. But you could do something similar to this to have your app run cross platform. Also, I'm not sure if you're using Alloy or not but this is an example of how you could structure your Views to accomplish what you are trying to do with the NavigationWindow.
index.xml
<Alloy>
<!-- iOS -->
<NavigationWindow id="mainNav" platform="ios" >
<Require id="default" src="win1"></Require>
</NavigationWindow>
<!-- Android -->
<Require id="default" src="win1" platform="android"></Require>
</Alloy>
win1.xml
<Alloy>
<Window id="win1">
<Label>My App Window</Label>
</Window>
</Alloy>

Android does not have concept of navigational Window but it do have action Bar which only works for 3.0+ android version so you have to keep that in mind before using that.Other than that you can fake the navigation-window by adding a view to window for android 3.0-
var win=Ti.UI.createWindow();
if(Ti.Platform.osname==='android'){
var view=Ti.UI.createView({
backgroundColor:'black',
height:'40dp',
top:'0dp',
width:Ti.UI.FILL
})
}
win.add(view);
win.open();
Thanks

Tel input doesn't fire event on return

I'm developing a Phonegap application on Android & IOS.
I can't find a solution for the following case.
I have a single field form to get zipcode (4 char length in my country). To get the numeric keyboard without thousand separator I used the next hack:
<input type="tel" name="myName" maxlength="4" pattern="[0-9]*" />
My problem is that I'm unable to hide keyboard without tap outside the field (to blur).
The "return" key isn't catchable (I can catch it with a text type but not with tel or number).
I know that forms fields (& related features) are really buggy on Android (as a lot of others stuffs in webviews).
Which hack could you suggest me to handle my problem?

In Android Use this line before setContentView(R.layout.main);
this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
Definitely you will solve your problem.

[Update]:
The workaround that work for me:
<input id="locator_zipcode" name="locator_zip" type="tel" pattern="[0-9]*" size="4" maxlength="4"
onkeyup="
if(isAndroid()){
if($('#locator_zipcode').attr('value').length==4){
setTimeout(function(){
$('#locator_zipcode').blur();
},500);
}
}"/>