Detecting the shift key entry event

Question

I need to detect a shift key entry which holds for 5sec and need to do some function.

Is it possible in javascript/JQ, in which an event identify the shift key entry which holds for 5 sec?

Please help, Thanks in advance.

Yes, it is possible using key events. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey — kosmos, Jan 12 '16 at 08:21
[Here](http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed) is something you need you can use this with timeout function `Keycode for shift is 16` rest you can find [here](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) — Aatman, Jan 12 '16 at 08:23

score 2 · Accepted Answer · answered Jan 12 '16 at 08:25

This would work!

$(function () {
  var tmr = 0;
  $(document).keydown(function (e) {
    if (e.shiftKey == true)
      tmr = setTimeout(function () {
        $("#status").append("You held the Shift key for 5 seconds!<br>");
        clearTimeout(tmr);
      }, 5000);
  }).keyup(function (e) {
    if (e.shiftKey == false)
    clearTimeout(tmr);
  });
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="status">
  Ready...<br>
</div>

@Thegreatdictator Ha ha... You are welcome bro! `:)` – Praveen Kumar Purushothaman Jan 12 '16 at 08:35 — Praveen Kumar Purushothaman, Jan 12 '16 at 08:35

score 1 · Answer 2 · edited Jan 12 '16 at 11:05

Check this fiddle

$(document).on('keydown', function(e)
{
   var shifted = e.shiftKey;
   var downTime = parseInt( $(this).attr( "data-startTimer") );
   console.log( shifted );
   if ( shifted && isNaN( downTime ) )
   {
     console.log( downTime );
     $(this).attr( "data-startTimer", new Date().getTime() );
   }
});

$(document).on('keyup', function(e)
{
  var downTime = parseInt( $(this).attr( "data-startTimer") );
  if ( !isNaN( downTime ) )
  {
     console.log( ( new Date().getTime() - downTime ) );
     if (  ( new Date().getTime() - downTime ) >= 5000 )
     {
        console.log( "yesss" );
        alert( "you held shift key for 5 seconds or longer" );
     }
  }
  $(this).attr( "data-startTimer", "null" );
});

@Thegreatdictator check this answer too – gurvinder372 Jan 12 '16 at 08:52 — gurvinder372, Jan 12 '16 at 08:52

microThread · Answer 3 · 2016-01-12T09:15:10.397

Check this

var text_area      = null;
var shift_key_press_duration  = 3 * 1000; /* 5 seconds. */
var key_down      = function(event) {

 if (event.keyCode == 16) {
  var d = new Date();

  if(text_area.attr( 'data-time') == 0) {
   text_area.attr( 'data-time', d.getTime() );
  }

  if( (d.getTime() - text_area.attr( 'data-time'))  >= shift_key_press_duration ) {
   $('#event').append( '<li>Event triggered at: ' + d  + "</li>");

                        alert('Bla');

   text_area.attr( 'data-time', '0');
  }
 }
 
};

var key_up       = function(event) {
 text_area.attr( 'data-time', '0');
}


$(document).ready(function() {

 text_area = $('#textarea');
 

 text_area
  .on('keydown', key_down)
  .on('keyup', key_up);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Event:
<ul id="event" style="border: 1px solid blue; min-height: 100px; "></ul>

<br><br>

<textarea id="textarea" style="width: 400px; height: 200px;" data-time="0">

Hold shift key for 3 seconds in this textarea

</textarea>

Detecting the shift key entry event

3 Answers3