Fatal编程技术网
  • javascript/
  • Javascript iOS网络应用的快速按键

Javascript iOS网络应用的快速按键

javascript jquery html css

Javascript iOS网络应用的快速按键,javascript,jquery,html,css,iphone-standalone-web-app,Javascript,Jquery,Html,Css,Iphone Standalone Web App,我找不到任何关于按钮按下速度的信息，所以我希望这一切正常。这是针对web应用程序的 对于那些拥有iPhone（或现在最现代的智能手机）的人来说，如果在解锁手机时有pin样式的解锁屏幕，智能手机会以最快的速度识别你所做的每一次触摸 网站也是如此，如果你快速点击按钮，它会在你点击后立即注册你的每一次点击 然而，我有一个跨越这两个问题 我有一个“pin”样式的登录，其中pin仅为测试目的的1234。我想要它，以便有人可以使用它作为一个网络应用程序，他们有自己独特的pin快速登录。但是，如果我尝试快速输

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

对于那些拥有iPhone（或现在最现代的智能手机）的人来说，如果在解锁手机时有pin样式的解锁屏幕，智能手机会以最快的速度识别你所做的每一次触摸

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

然而，我有一个跨越这两个问题

我有一个“pin”样式的登录，其中pin仅为测试目的的
1234
。我想要它，以便有人可以使用它作为一个网络应用程序，他们有自己独特的pin快速登录。但是，如果我尝试快速输入
1234
，它只注册
1
和
4
，或者有时注册
1
和
3
，这取决于我的速度。如果我花点时间去做，那么我可以得到所有的4个，但快速做是我的问题所在

总体问题：

网络应用有没有办法在智能手机（但主要是iOS）上注册快速手指按压

代码 HTML

jQuery

$（文档）.ready（函数（）{
var数组=[]；
var pin=“1234”；
var a=0；
$（'.num'）。单击（函数（）{
a++；
if（array.length=4）
{
if（array.join（“”===pin）
{
$（'.small circle'）.css（'background'，'green'）；
$（'.small circle'）.removeClass（'active'）；
}
其他的
{
数组=[]；
a=0；
$（'.small circle'）.css（'background'，'red'）；
$（'.small circle'）.removeClass（'active'）；
}
}
}, 100);
});
和一个用于快速检查的按钮，尽管我不确定它是否能在iPhone上工作。

用户执行的单击需要300毫秒才能发送事件。这只是为了检测可能的双击

您可以通过收听touchstart touchend并在单击时立即触发它们来防止这种情况

但英国《金融时报》在其web应用程序中已经做得很好，而不是构建自己的开始-结束检测。请参阅：了解详细信息。

我认为您应该尝试在不使用jQuery的情况下使用它，它会更快一些，并且可能会解决您的问题。它不是实际的网页。这是iPhone意识到自己按下按钮的速度@安德烈正是我想要的！非常感谢你！ 
<!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>

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;
}

$(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);
});