css form android

Question

I have a form in my website. I made it first for desktop browsers, and now I need this form to work in android browsers too. So, I got an android device, and tested the website, but when I try to enter values in the input fields, I can't. Any help?

This is the code of the fields of the form:

<p>Empresa</p> <input type="text" value="empresa" name="empresa" id="empresa" /><br />              
<p>Usuario</p> <input type="text" value="usuario" name="alias" id="usuario"/><br />
<p>Contrase&ntilde;a</p> <input type="password" value="contraseña" name="clave" id="pass" /><br />                   
<input type="submit" value="ACCESO" id="boton_popup"/>
<input type="hidden" value="xxx" name="url">

I implemented this code with jQuery (It's like placeholder, but with jQuery I obtained compatibility with more browsers). Maybe this code doesn't work in android browsers.

$("#usuario").click(function(){$(this).val("");});
$("#pass").click(function(){$(this).val("");});
$("#empresa").click(function(){$(this).val("");});
$("#empresa").one("keypress",function(){$(this).val("");});

EDIT: Tested in samsung galaxy s2, and it works like a charm.

try using opera mini first... and then we can say if its because of android browser.. — sarveshseri, Jul 11 '12 at 09:04
I can't test it with opera mini emulator: http://www.opera.com/developer/tools/mini/ because I've a button, and when I click on this button, I open a new div using fadeIn of jQuery...and in opera mini, this div doesn't open...What happens is that when I click on the button, the browser come back to the same url, adding # at the end of the url. — Daniel Garcia Sanchez, Jul 11 '12 at 09:49
ok... so that means you have a lot of complicated JavaScript code.. I will say try making a page with just this form and check if it works fine. — sarveshseri, Jul 11 '12 at 10:04
Good idea. I'm going to prepare in jsfiddle.net. Wait a moment please. — Daniel Garcia Sanchez, Jul 11 '12 at 10:08
The code works on my Android the same way as in desktop browsers. It works in a very questionable way, clearing a field whenever I click on it, but that’s how it has been programmed, and it works that way in general, not just on Android. If you have problems in entering data, then the problem is probably elsewhere, not in the code snippets posted, or in differences between Android versions. — Jukka K. Korpela, Jul 11 '12 at 10:13
So, can you entire data Jukka? Has your android touch screen? — Daniel Garcia Sanchez, Jul 11 '12 at 10:31

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I'm guessing you android is a touch screen. The touch screen events are different to the click events because of the nature of 'gestures'. Try using the event onTouchStart instead.

see https://stackoverflow.com/a/4322252/1512291

edited May 23 '17 at 12:27

Community

1
1

answered Jul 11 '12 at 09:07

Dpolehonski

948
6
11

Yes, my android is a touch screen. – Daniel Garcia Sanchez Jul 11 '12 at 09:36
Then try: $("#usuario").bind('touchstart',function(){$(this).val("");}); – Dpolehonski Jul 11 '12 at 11:56
Ok, I'm going to try it. – Daniel Garcia Sanchez Jul 11 '12 at 14:22
It doesn't work. I'm not be able to fill the fields of the form... :( I don't understand – Daniel Garcia Sanchez Jul 11 '12 at 14:37

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

I changed your markup to the following:

<form action="example.php">
    <label>Empresa <input type="text" placeholder="empresa" name="empresa" id="empresa"></label>
    <label>Usuario <input type="text" placehoder="usuario" name="usuario" id="usuario"></label>
    <label>Contraseña <input type="text" placeholder="contraseña" name="clave" id="pass"></label>

    <button type="submit">Acceso</button>

    <input type="hidden" value="xxx" name="url">
</form>

No jQuery needed. I bet it works in mobile too. jQuery isn't magic. See This question.

edited May 23 '17 at 12:04

Community

1
1

answered Jul 12 '12 at 15:22

Madara's Ghost

172,118
50
264
308

1

Hi, yes, placeholder works fine in android browsers, for example: http://caniuse.com/#search=placeholder I used jQuery there in order to make it compatible with more browsers, only for that, because as you say properly, with placeholder is sufficient. Regards. – Daniel Garcia Sanchez Jul 12 '12 at 15:26

score 0 · Accepted Answer · answered Jul 17 '12 at 16:22

Solved!!! It was my mistake,that I didn't tell that for these input fields, I apply the font DroidSans and this font isn't compatible with some android browsers... I removed this font, and now it works!!!

But I have one question.... I was applying this css to the text of the input fields:

font-family: DroidSans,Arial;

I thought that is is not available the first, the second font is got (Arial)..... Thanks for all you help friends. Best regards, Daniel

css form android

3 Answers3