0

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:

https://i.stack.imgur.com/jIytg.png

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:

https://i.stack.imgur.com/XHH5j.png

Screenshot 3:

https://i.stack.imgur.com/8MC2H.png

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:

https://i.stack.imgur.com/37txp.png

I only get that problem with jQuery Mobile. On other website there is no problem with input values.

Any suggestions?

RedWolves
  • 10,379
  • 12
  • 49
  • 68
gn90at
  • 29
  • 1
  • 4

1 Answers1

0

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

RedWolves
  • 10,379
  • 12
  • 49
  • 68