masked input not working in android mobiles? - android

I am using the digitalbush masked input jQuery plugin. It is working fine in web browsers and the iPhone browser perfectly, but it is not working for Android mobile devices.
My issue :
mask is
in input field _ - _ - ___.
When I type numbers it will 12345685555___--
Example: http://rossbender.com/temp/mask.html
Any suggestions? How can I solve this?
Thanks
Prasad.

I resolved this issue with three actions, which have fixed this for all Android 4.0+ phones:
Update masked-input to at least version 1.4
Add type="tel" to the input, to trigger the numeric keyboard
Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.

I tried using the raw script that Jonathan Rowny mentioned, but I was still having the same problem on an S3 - Chrome browser. I think it has something to do with inputs type="tel" and/or type="number". I ended up having to use another plugin. http://igorescobar.github.io/jQuery-Mask-Plugin/
jquery-mask (not to be confused with jquery-masked-input) is very similar but the syntax was slightly different. Hope this helps anyone else with this issue.
jquery-masked-input syntax:
$("#phone").mask("(999) 999-9999");
VS
jquery-mask syntax: ('#phone').mask('(000) 000-0000');

This was fixed awhile ago but for some reason the distribution posted on the website never took the changes. If you grab from the raw source, the fix works: https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js

After trying different mask libraries (Inputmask, ui-mask, ngMask) I ended up using jQuery-Mask-Plugin https://igorescobar.github.io/jQuery-Mask-Plugin/ which works pretty well and is also lightweight and well documented and has angularjs, react ,... samples.

I just ran into this problem and resolved it by removing the attribute type="number" from the asp textbox. After that masked input worked even on mobile devices.

The library used in the question is no longer being maintained. I switched my application to jQuery Mask Input as it works great, has a very similar base init call to the former library making for an extremely easy transition and, at the time of this post, jQuery Mask Input is regularly maintained at GitHub.
My issue was with the phone number masker moving the cursor back to the second position when 3 or 4 digits were entered. The cursor continued to act odd after that point. The problem was noticed using jQuery Masked Input v1.4.1 (old library) in android tablets using Chrome post major version 51.

To further enhance the accepted answer of Tony Brasunas, add following snippet in jquery.maskedinput.js for point number 3 to dynamically increase maxlength so it doesn't interfere with caret action.
Remove the input's maxlength attribute or set it to a value certain not to interfere with the caret action, like 20.
defs = $.mask.definitions;
tests = [];
partialPosition = len = mask.length;
firstNonMaskPos = null;
//insert snippet below
if (chrome && android) {
console.log("chrome && android");
var allAllowedRegExps = '';
jQuery.each(defs, function (key, value) {
allAllowedRegExps = allAllowedRegExps + key;
});
allAllowedRegExps = allAllowedRegExps.replace(/\[/g, '');
allAllowedRegExps = allAllowedRegExps.replace(/\]/g, '');
allAllowedRegExps = '[^' + allAllowedRegExps + ']';
var re = new RegExp(allAllowedRegExps, "g");
var actual = mask;
var replacedVal = actual.replace(re, "");
var actualValue = actual.length - replacedVal.length;
if ($(this).attr('maxlength') !== undefined) {
$(this).attr('maxlength', parseInt(this.attr('maxlength')) + parseInt(actualValue));
}
}
mask = String(mask);

This can be a quick fix:
var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);
// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
$('.price_input').attr('type','tel');
}

It worked for me by using 1.4.1 and setting the max length to one plus the number of chars in the mask. The mask limited the actual input and the max length +1 fixed the problem of not being able to type numbers in the field.

Related

Adobe Air Android / Arabic text issue

i'm using Adobe Flash Air for IOS & Android problem now is the Arabic RTL i can't write arabic.
My
Input Text is Classic not " TLF Text "
The TLF problem is the keyboard not showing up in android..
Example
1) Did you try doing some research? I googled as3 "android" keyboard not showing.
What's wrong with solutions suggested on first page results of the above link?
2) Consider using Stage text and there's an introduction article about it.
3) Try something like below (untested) as a starting point. Hard to fix your code since none shown.
Also read this guide first. Might be useful.
var testInput : TextField = new TextField();
testInput.needsSoftKeyboard = true;
testInput.type = "input";
testInput.addEventListener(FocusEvent.FOCUS_IN, onFocusText);
stage.addChild(testInput);
function onFocusText( e:FocusEvent ):void
{
testInput.requestSoftKeyboard();
}

On Android in Cucumber/Calabash, how do I test with a webview iframe?

I can locate an iframe in an Android webview, but I need to interact with it. Various pages suggest
query("webView css:'iframe'", :stringByEvaluatingJavaScriptFromString => '...')
but that results in "No such method found: stringByEvaluatingJavaScriptFromString([String])" and it looks like an iOS function, so I'm pretty sure this is an iOS-only solution: I need Android.
I know I can pass javascript queries in by opening them in a URL, but I've only experienced getting stuff out of an Android webview with specially-code Chrome objects linked in to the application.
Any ideas for getting data out?
The iOS responses are correct, you should use javascript to get the contents of an iframe. However, you should use evaluate_javascript(query_string, javascript) to evaluate javascript in Android. e.g
evaluate_javascript("webview", "return document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('...').getBoundingClientRect();")
Use the coordinates to tap the view.
If the rect is not parsed correctly, you could do something like this:
var boundingBox = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('main').getBoundingClientRect();
var rect = {};
rect.width = boundingBox.width;
rect.height = boundingBox.height;
rect.left = boundingBox.left;
rect.top = boundingBox.top;
return rect;
Secondly, query('webView css:#grabby') is not a valid query. query('webView css:"#grabby"') or query("webView css:'#grabby'") is. You are most likely running a (very) old version of Calabash-Android if the test-server is crashing instead of reporting it.
I wrote what amounted to an answer while I was exploring, but I'm posting it here to save someone else time (hopefully).
I can successfully run Javascript in the view:
query("webView index:0", :loadUrl => 'javascript:alert("Hello")')
so I can probably arrange to press buttons plausibly enough for testing:
query("webview index:0", :loadUrl => 'javascript: ifr = document.getElementsByTagName("iframe")[0]; idoc = ifr.contentDocument || ifr.contentWindow.document; idoc.getElementById('myCheck').click(); false')
To get data out again, I can create a DIV and set its title (for example) with some 'return' value:
query("webView index:0", :loadUrl => 'javascript:var idiv = document.createElement("div"); idiv.id="grabby"; document.getElementsByTagName("body")[0].appendChild(idiv); idiv.title="some return value"; false')
(The trailing 'false' in the javascript: command is there to prevent the result of running the javascript: command from replacing the page - that took a while to work out.)
I can look into the iframe too:
query("webView index:0", :loadUrl => 'javascript:var idiv = document.getElementById("grabby"); ifr = document.getElementsByTagName("iframe")[0]; idoc = ifr.contentDocument || ifr.contentWindow.document; idiv.title = idoc.getElementsByTagName("input")[3].id; false')
When I tried to retrieve it with
query('webView css:#grabby')
it hung for a while, then crashed with a timeout:
HTTPClient::ReceiveTimeoutError: execution expired
from /Users/tim./.rvm/gems/ruby-2.1.5/gems/httpclient-2.6.0.1/lib/httpclient/session.rb:876:in `gets'
from /Users/tim./.rvm/gems/ruby-2.1.5/gems/httpclient-2.6.0.1/lib/httpclient/session.rb:876:in `block in parse_header'
from ...
curiously, query('webView css:"*"') mostly seems to work without timeouts, and reports the 'grabby' DIV complete with the title string
query('webView css:"*"').find { |e| e['id'] == 'grabby' }
so that's useful enough. I'll have to write some horrible recursive descent thingy to fish out the iframe's contents - perhaps make the div invisible and just copy the htmlContent there.
I'm really not sure why the direct query crashes.

Google Places Autocomplete plugin isnt working in Firefox android

We are using google's places-autocomplete plugin on our website.
Of late we have received several complaints from our website visitors that this plugin isn't working in the Android version of Firefox. It works fine in the desktop version of Firefox however.
The problem can be simply observed by
Going to the places-autocomplete example here
Trying to enter a zip code in the "Enter a location" search input
You will observe the following 2 issues -
Google Auto-complete should show suggestions as you start typing the
zip code. But it doesn't until one types a space or , after the 5 digit zip code.
When the suggestions do show up (after typing space or ,), you can't choose the first suggestion. As you tap on it, the cursor moves back to the search input. You can however choose the second or third suggestion correctly.
Problem #2 is extremely annoying and frustrating for the user. We've had received several complaints about this.
I have confirmed this on Firefox version 36.0.2 on a Samsung S4 running Android 4.4.2.
How can this be resolved?
A work around for the second issue is to give the first autocomplete suggestion a top margin so the user can click it. Its not pretty but its functional.
css
.FirefoxAndroid .pac-container .pac-item:first-child {
margin-top: 20px;
}
js
<script>
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1;
if(is_firefox && is_android){
$('html').addClass('FirefoxAndroid');
}
</script>
I encountered the same issue today - the website I am working on is working perfectly on every web browser, the auto-complete as well except on FF mobile.
After trying 3-4 solutions the one that worked for me was to declare the var place at the top of my code.
I have something like that
var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'be'},
types: ['(regions)'] // (cities)
};
autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
...
}
It was not working only on FF mobile because I wasn't declaring place at the top.
Maybe it will help someone in the future who knows

Android app not working in kitkat version but working in lesser versions

I have a sencha application which runs fine on Jellybean version. When I tried to run it in Kitkat version, soft keyboard hiding my textfield. To sort out that, I gave android:windowSoftInputMode= "stateVisible|adjustResize" in AndroidManifest file. Though it got sorted, that induced the following bug as shown in the screenshot. View cuts in to halves. Is there any solution for this? Would be really thankful if anybody can help me in that. Thanks!
We can resolve this bug using javascript, by getting the offset of the element through id and scroll it to that particular offset dynamically
var panelHeight = Ext.get('panelId').getHeight();
console.log('offset of panel height scrollToFocussedElement : '+panelHeight)
var offset = document.getElementById('elementId').offsetTop;
if (navigator.userAgent.toLowerCase().match('android')) {
offset = offset + panelHeight;
}
console.log('offset in scrollToFocussedElement : '+offset);
Ext.getCmp('viewId').getScrollable().getScroller().scrollTo(0, offset);

Not able to use maxlength in Android JellyBean

I am facing an issue in Android which is like whenever I am using the maxlenth attribute on input e.g. ; After entering 20 characters on android tab, that page gets hang, I am unable to delete anything or add anything in any other input, other pages works fine but not this page where I entered the charcters upto max limit
I am using on KArbonn Smart Tab 8
Android JellyBean
It is a well known Android 4.1 issue.
Jelly Bean WebView not working well with HTML maxlength attribute for text box
http://code.google.com/p/android/issues/detail?id=35264
Unfortunately, no fix yet. You can follow the above stack-overflow post where they have a JS fix.
I have found the answer and it is working for me:
x$("#fieldWithMaxLength").on("keydown", function(e) {
if(e.keyCode != 8) {
maxlength = $(this).attr('maxlength');
if(this.value.length >= maxlength ) {
var curIndex = $(this).attr('tabindex');
$('[tabindex=' + curIndex + ']').focus();
return false;
}
}
});

Categories

Resources