Quick button pressing for iOS web app

StackOverflow https://stackoverflow.com/questions/20333131

Question

I couldn't find anything on how fast a button was pressed, so I hope this is OK. This is for a web-application.

For those of you who have an iPhone (or most modern smartphones now), if you have the pin styled unlock screen when you unlock your phone, the smartphone recognizes every touch you do, as quick as you do it.

The same is with a website, if you click on buttons quickly, it registers every click you do as soon as you do it.

However, I am having a problem crossing the two over.

I have a 'pin' styled login where the pin is just 1234 for test purposes. I want it so that someone can use it as a web-app and they have their unique pin to sign in quickly. However, if I try to put in 1234 quickly, it only registers 1 and 4 or sometimes 1 and 3 depending on how slow I do it. If I take my time and do it, then I can get all 4, but doing it quick is where my problem lies.

Overall question:

Is there any way for a web-app to register quick finger presses on smartphones (but primarily iOS?)

Code HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes" /> 
        <title>Pin</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src='http://code.jquery.com/jquery.min.js'></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class='container'>
            <div class='row text-center'>
                <div class='col-xs-12'>
                    <div class='small-circle a1'></div>
                    <div class='small-circle a2'></div>
                    <div class='small-circle a3'></div>
                    <div class='small-circle a4'></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="1"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="2"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="3"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="4"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="5"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="6"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="7"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="8"></div>
                </div>
                <div class='col-xs-4'>
                        <div class='main num hover' data-number="9"></div>
                </div>
                <div class='clearfix'></div>
                <div class='col-xs-12'>
                        <div class='bottom_main num hover' data-number="0"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src='script.js'></script>
    </body>
</html>

CSS

body{
    counter-reset: amount;
}
.num{
    width:75px;
    height:75px;
    border:1px solid #000;
    border-radius:100%;
    line-height:75px;
    margin:auto;
    margin-top:30px;
    counter-increment:amount;
}
.main:before{
    content:counter(amount);
}
.bottom_main:before{
    content:'0';
}

.active{
    background:blue !important;
}
.small-circle{
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #000;
    border-radius:100%;
    margin-top:20px;
}

jQuery

$(document).ready(function() {
    var array = [];
    var pin = "1234";
    var a = 0;
    $('.num').click(function(){
        a++;
        if (array.length <= 3)
        {
            array.push($(this).attr('data-number'));
        }
    });
    setInterval(function() {
        $('.a'+a).addClass('active');
        if (array.length >= 4)
        {
            if (array.join("") === pin)
            {
                $('.small-circle').css('background','green');
                $('.small-circle').removeClass('active');
            }
            else
            {
                array = [];
                a = 0;
                $('.small-circle').css('background','red');
                $('.small-circle').removeClass('active');
            }
        }
    }, 100);
});

And a jsFiddle for quick checking, although I'm not sure that it will work on an iPhone.

Was it helpful?

Solution

A click performed by the user takes 300ms to dispatch an event. This is just to detect possible doubleclicks.

You can prevent this by listening to touchstart-touchend and trigger them as a click without delay.

But instead of building your own start-end detections, this is already done well by Financial Times in their web app. See: https://github.com/ftlabs/fastclick for details.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top