忽略 ux 的键控几秒钟

Ignore keyup for a few seconds for ux

本文关键字:几秒 ux 忽略      更新时间:2023-09-26

我有一个使用 jquery 验证器插件的多步骤表单,当您按 Enter 时也会转到下一页。

function showPage(pg){
    $('formError').empty();
    $('table:visible').hide();
    $('#page-' + pg).show();
    $('input[type="text"]:visible').focus();
}
$(document).keydown(function(e) {
if(e.which == 13) {
    if($('#msform :input:visible').valid()){
    page++;
    showPage(page);
    }}});

问题是,如果使用 Enter 按钮,它会在下一页上触发验证错误,因为该按钮仍在按下并尝试转到下一页。

如何在短时间内忽略 Enter 键,以便释放 Enter 键可以转到下一页,而无需尝试在下一页之后转到该页面?

您可以等待相应的键键事件,然后再考虑 enter 键的新键下事件。

pressed = {};
$(document).keydown(function(e){
        if(pressed[e.which] == null && e.which == '13'){
            if($('#msform :input:visible').valid()) {
                page++;
                showPage(page);
                }
            }
        pressed[e.which] = true;
});
$(document).keyup(function(e) {
    pressed[e.which] = null;
});
你可以

像这样使用 setTimeout() 函数

$(document).keydown(function(e) {
    setTimeout(myFunction(),500);
    });
function myFunction(){
    if(e.which == 13) {
      if($('#msform :input:visible').valid()){
      page++;
      showPage(page);
    }}
}

::::::::::::::::::更新::::::::::::::::::

$(document).keydown(function(e) {
     if(e.which == 13) {   
       setTimeout(myFunction(),500);
     }
  });
function myFunction(){
   if($('#msform :input:visible').valid()){
     page++;
     showPage(page);
    }
 }