senchalabs / jQTouch

Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).

http://www.jqtouch.com/

MIT License

2.79k stars 592 forks source link

Form page jumps to first field #60

Closed marcofucci closed 12 years ago

marcofucci commented 13 years ago

Virtual keyboard showing up randomly.

See discussion on Google Group for more information.

I've created a test page, if you click on the second link on the iPhone Simulator you'll see the keyboard showing up. Please try several times if you can't reproduce it, it seems that sometimes you need 20/30 clicks.

<!doctype html>
<head>
    <title>MyApp</title>
    <link rel="stylesheet" href="css/jqtouch/jqtouch.css">
    <script src="js/jquery-1.4.2.js"></script>
    <script src="js/jqtouch/jqtouch.js"></script>
    <script>
        var jQT = $.jQTouch();
    </script>
</head>
<body>
    <div id="jqt">
        <div id="list">
            <div class="toolbar">
                <h1>List</h1>
            </div>
            <ul>
                <li>
                    <a href="#detail">Link 1</a>
                    <a href="#detail" style="display:block; width: 200px">Link 2</a>
                </li>
            </ul>
        </div>

        <div id="detail">
            <div class="toolbar">
                <a class="button back" href="#">Back</a>
                <h1>Detail</h1>
            </div>
            <form method="get">
                <input type="text" placeholder="Title" name="Title">
            </form>
        </div>
    </div>
</body>
</html>

bjornb commented 13 years ago

Ive seen this problem, and if using latest r160 version, and using a tap-event binded to the link, I get an extra tap that opens up the first thing in the form. If I rather just bind it to click, it works though.

jonathanstark commented 13 years ago

Yeah, I'm trying to fix this. Haven't been able to abort the click event creation once I've already handled the touch. It's even worse on Android. If anyone has a fix, PLMK.

graphikjunkie commented 13 years ago

It's a problem in the jqtouch stylesheet. I fixed the Android keyboard issue by commenting out these lines:

jqt {

-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: "Helvetica Neue", Helvetica;
 /*
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

}

jqt > * {

-webkit-backface-visibility: hidden; -webkit-box-sizing: border-box; display: none; / position: absolute; left: 0; width: 100%; -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); / min-height: 100%; overflow-x: hidden; }

These rules really mess with android. Caution though, the first block is still needed for Iphone so I ended up patching in the view like so:

jonathanstark commented 13 years ago

Thanks for the info, but I don't think the changes to the stylesheet fix the issue. jqtouch.css in the latest version of jqt (r161 at them moment) has been updated to only apply those rules on devices that support 3d - which doesn't include Android phones - and I'm still seeing the random focus bug. Maybe it was something else you did?

bioit commented 12 years ago

I was having the same issue and simply added a blank character before the form ( ). It's obviously not a fix and I am quite annoyed by the fact that my form is not positioned on the top of my page but it's a viable workaround.

michaelbelt commented 12 years ago

Any word on this issue? I'm experiencing it right now, and I believe I've found the CAUSE, just no cure. The problem seems to be this:

If you have a div called "settings" and an input for it is physically on the same spot of the screen as the button in the "home" div that you click on to get to it.

I know that's a ham-fisted way of phrasing it, but I've been able to duplicate it 100% of the time.

I could do a desktop video (like jonathan did for PhoneGap) and post it if what I said doesn't make sense.

michaelbelt commented 12 years ago

After reading more issues on here, it seems I'm late to the party. :) I assume this is the same thing people are calling "ghostclicks?"

I've read the threads, but haven't found any keepers. Anybody have any suggestions, or should I move to Sencha Touch?

davidkaneda commented 12 years ago

Dupe of #253