I got a strange jQuery Mobile problem (sorry for my English)
(tested with a Samsung Galaxy S2 - Default Browser. On my Nexus 4 there is all fine (Default Chrome))
I have a form with some input fields. they all have a fix value. (screen 1)
Screenshot 1:
The code:
<input type="tel" name="format-breite" id="format-breite" class="chfunc" value="Breite in mm: ">
<input type="tel" name="format-hoehe" id="format-hoehe" class="chfunc" value="Höhe in mm: ">
When you click in the input the value becomes white (you cant see it anymore) and the cursor is not at the right position. But you can see the text you type in with the keyboard (screen 2 & 3).
Screenshot 2:
Screenshot 3:
Then, when you click out of the input all is here again but the text you typed in is not at the right position. (screen 4)
Screenshot 4:
I only get that problem with jQuery Mobile. On other website there is no problem with input values.
Any suggestions?
I did some testing with this code in a jsbin and browserstack. From what I can tell is that Samsung S2 isn't fully HTML5 ready for the input type="tel" tag/attribute. Here is the test page I used: http://jsbin.com/eweqeq/1/edit
If I changed it to input type="text" I get the behavior you're looking for in the simulator.
Seems that the functionality of input type="tel" is very minimal for android according to this report http://www.quirksmode.org/html5/inputs_mobile.html I would classify this as a device and HTML5 issue then a jQuery Mobile issue. I get the same behavior without the jQuery Mobile library added to the page here: http://jsbin.com/awagos/1/edit
Related
I have the next div:
<div id="divLlenarImgs">
<input type="file" class="img" name="img[]" accept="image/*" capture="camera"/>
</div>
When I run my web site in a mobile (android or iphone) and click on that input, the camera is shown by the attribute capture.
But when I add more inputs type file dynamically their attribute capture stops to work. The first input always, but the next added inputs don't.
Is there any reason for this to happen?
I add the next inputs exactly like the first one. And I have tried many different browsers: Safari, Chrome, Firefox and Android default browser.
EDIT:
Only work ALL inputs using Chrome for Android.
How do I display a numeric keyboard with a decimal button on iOS and Android? Is there an Ionic-specific way to do this?
I'm able to display a numeric keyboard on both iOS and Android with the following:
<input type="number" pattern="[0-9]*">
iOS appears to disregard the type of value "number" and displays the number pad based off the pattern attribute, but the type is set to "number" anyway for Android.
Edit: Forgot to mention that I have tried pattern="[0-9.]*". iOS simply shows the full keyboard when I do this.
Edit2: I've also tried pattern="\d+[,.]?\d*" - again, to no avail.
Try the below syntax to achieve this. Its working in iPhone and Android.
<ion-input inputmode="decimal" type="number" />
Seems that the problem is relative to some samsung devices only.
I have the same issue that you describe on Samsung Galaxy Note 8.0 (android 4.4.2) but everything works fine on Nexus simply using
<input type="number" step="0.01">
related posts Google Chrome on Android (and only Android) Does not allow Decimal with type number and step="any"
and Samsung Galaxy Tablet does not allow entering floating point numbers to inputs with "number" type
refer this link:
https://github.com/skol-pro/ion-digit-keyboard-v2#6---example--demo
just hide the native keyboard on setfocus().
In a web page requiring input for date of birth, it is not responding to the click on the in the WebView, but working on the built-in browser in the same device LG Optimus G Pro (Android 4.1.2).
The HTML snippet is:
<div class="classname">
<label for="id_foo" class="label">Date of Birth:</label>
<input id="id_foo" maxlength="10" class="intext" type="date" name="dateofbirth" value="1985-07-04" />
</div>
Is there any other solution other than external date picker library or creating one from scratch as mentioned in this post:
Date/Time Picker not showing on Android 4.1.2 app
<input type="date">
still lacks wide-spread support according to my sampling at other questions here at stackoverflow.
Personally, I have tried that HTML5 input type in android 4.4.4 webview and to my surprise it does not work. However, it does work in my android 4.4.4 Chrome browser outside a webview. Not sure why.
You might need to fall back to a Jquery datepicker widget or your own implementation if you want a cross-browser/full-webview solution. I have written a very simplistic js approach for asking the user a date. Take a look at Invoke native date picker from web-app on iOS/Android
I have a PhoneGap app with several fields of input type="text". Besides that it has some HTML textareas.
When running the app on Android and typing text into an HTML textarea element, the Android predictive text works fine. However, when I type text into an input element of type="text" no predictions are shown.
I tested this both on my HTC Sensation and Samsung Galaxy II tablet, both running Android 4.0.3, and the predictive text is not shown on both devices.
This problem can be easily reproduced by adding an input element to the example application that is provided by PhoneGap. I tried removing all css to see if that was causing my problem, but the issue remained.
Does anyone know a way to fix this?
I think text prediction depends of the keyboard you are using not the type of input. Check your text suggestions in the settings of the phone.
I just discovered that this works on iOS:
<input type="text" autocorrect="off" />
Perhaps it might work on Android as well.
The problem is no longer present in current versions of PhoneGap/Cordova.
I would like to have a HTML 5 Input Element like:
<input type="number" step="any" value="3.5"/>
This works fine on my iPhone Safari Browser but not on Chrome for Android.
It shows the right Soft-Keyboard, but not the decimal separator. So I'm not
able to enter any decimal places.
Are there e.g. any JavaScript tweaks that make the chrome browser show the
right keyboard?
Because it feels like a bug: Can someone point me to the Chrome for Android Issue Tracker to open up a case for this?
I got the same problem and came accross this link: Google Chrome on Android (and only Android) Does not allow Decimal with type number and step="any"
I have not yet tested on a iDevice, but i got the problem on my Samsung Galaxy SIII.
This is not a bug, but according to the W3 specification that other browsers does not follow. The fix is supposed to be "any", but Chrome hasn't implemented that either.