'cordova webview processing autofill form values cannot be parsed or is out of range

I have read many threads on this issue, but everything is dealing with standard browsers and webkits, virtually nothing is related to app webviews that run on cordova/ionic (or other) android and iOS.

I have finally gotten form autofill to work on my app webforms for both Android and iOS, the problem is I need to try to sanitize the info before its added to the input field or assigned to the ng-model - I am not certain which is causing this issue.

My form field:

        <input type="number" placeholder="Mobile Number" inputmode="numeric" pattern="[0-9]*" id="user_phone" autocomplete="tel-national" ng-model="regObj.user_phone" ng-keypress="monitorLength($event,'user_phone',phoneNumLengths,1)" ng-blur="verifyLength('user_phone',phoneNumLengths)" />

I have various functions that are detecting length to ensure proper phone numbers are entered, helping reduce errors.

In the above example, that is designed for a number that is 10 numbers long (no spaces or dashes are allowed), the autofill window pops up with a top option for +12025551212. If the users selects this option, as it is their phone number, then it causes the following warning and the input field is not populated:

The specified value "+12025551212" cannot be parsed, or is out of range

In this case, the + is not numeric and the fact the string is 12 characters long is double trouble since the input field is limited to 10. Thus I don't know if ng-model is causing the error or if input type=number is causing the issue - or both.

Either way, how can I capture the selected autofill value to try to parse the value to strip out the +1 or at a minimum detect the value is out of range to alert the user.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source