最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to prevent enter key press for multiple time using jquery? - Stack Overflow

programmeradmin1浏览0评论

I need to find continuous enter key pressing in jquery. Is this possible?

$('#password-input').keyup(function(e) {
    if (e.which == 13) {
        alert("Enter key")
    }
});

Here If I am pressing ENTER key more than one time mean I am getting alerts for two times. But i need to get only one time only.

Please help me!

I need to find continuous enter key pressing in jquery. Is this possible?

$('#password-input').keyup(function(e) {
    if (e.which == 13) {
        alert("Enter key")
    }
});

Here If I am pressing ENTER key more than one time mean I am getting alerts for two times. But i need to get only one time only.

Please help me!

Share Improve this question edited Sep 13, 2016 at 8:52 Mohammad 21.5k16 gold badges56 silver badges84 bronze badges asked Sep 13, 2016 at 8:36 Gokul KumarGokul Kumar 4097 silver badges18 bronze badges 1
  • 1 more than one time at the same time:)) – madalinivascu Commented Sep 13, 2016 at 8:39
Add a ment  | 

5 Answers 5

Reset to default 3

You can use jQuery#bind to bind the keyup event and than unbind the keyup event with jQuery#unbind when the end user pres the "Enter key" in order to prevent multiple times the "Enter key":

var $passwordInput = $('#password-input');

$passwordInput.bind('keyup', function(e) {
  passwordInputKeyupHandler(e);
});

function passwordInputKeyupHandler(e) {   
  if (e.which === 13) {
    console.log('Enter key!');
    $passwordInput.unbind('keyup');

    return setTimeout(function(){
      console.log('Rebind keyup event');
      $passwordInput.keyup(passwordInputKeyupHandler);
    }, 2000);
  } 

  console.log('Any other key...');
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="password-input" type="password">

Note that as pointed out by @dorado on the ments was made a 'rebind' after 2 seconds, using setTimeout(), in order to avoid the end user to have to make a page reload..

Besides using a variable to store the state I suppose you will also want that if a few milliseconds have passed, then pressing enter key again gives you an alert. This can be achieve by setTimeout. For example, here the enter key will be re-detected only if it is pressed after an interval of 2000ms.

var pressed = false;
$('#input-element').keyup(function(e) {
    if (!pressed) {
        if (e.which == 13) {
            pressed = true;
            alert('Enter pressed.');
            i = setTimeout(function() {
                pressed = false;
            }, 2000);

        }
    }
});

Use a variable to store the state

var pressed = false;
$('#password-input').keyup(function(e) {
    if (!pressed) {
        if (e.which == 13) {
            pressed = true;
            alert('Enter key');
        }
    }
});

Use .setTimeout() to set delay for display alert. In delay time, if enter key pressed again, remove previous timeout and set new timeout. At the end of timeout, display alert.

var interval;
$('#password-input').keyup(function (e) {
    if (e.which == 13) {
      clearInterval(interval);
      interval = setTimeout(function(){
          alert("Enter key")
      }, 500);
    }
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password-input" />

You can change time of delay to your custom time.

    var pressed = false;
    $('#password-input').on('keyup',function(e) {
        if (e.which == 13 && !pressed) {
            pressed = true;
            alert("Enter key");
        }
    });
发布评论

评论列表(0)

  1. 暂无评论