iOS网络应用程序的快速按键

Quick button pressing for iOS web app

本文关键字：网络 应用程序 iOS      更新时间：2024-02-03

我找不到任何关于按钮按下速度的信息，所以我希望这没问题。这是针对web应用程序的。

对于那些拥有iPhone（或现在大多数现代智能手机）的人来说，如果你在解锁手机时有pin风格的解锁屏幕，智能手机会识别你的每一次触摸，速度会很快。

网站也是如此，如果你快速点击按钮，它会在你点击后立即注册你的每一次点击

然而，我在跨越两者时遇到了一个问题。

我有一个"pin"风格的登录，其中pin只是用于测试目的的1234。我想要它，这样人们就可以把它用作网络应用程序，并且他们有自己独特的密码可以快速登录。但是，如果我尝试快速放入1234，它只会注册1和4，有时还会注册1和3，这取决于我做得有多慢。如果我慢慢来做，那么我可以获得所有4个，但快速完成是我的问题所在。

总体问题：

有什么方法可以让网络应用程序在智能手机（但主要是iOS）上注册快速手指按压吗

代码 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);
});

还有一个用于快速检查的jsFiddle，尽管我不确定它是否能在iPhone上工作。

用户执行的一次单击需要300ms才能调度一个事件。这只是为了检测可能的双击。

您可以通过监听touchstart touchend来防止这种情况，并将其作为点击触发而不延迟。

但英国《金融时报》在其网络应用程序中已经做得很好，而不是建立自己的起点-终点检测。请参阅：https://github.com/ftlabs/fastclick详细信息。

相关文章：