正在检测换档键输入事件

Detecting the shift key entry event

本文关键字：输入 入事件 检测      更新时间：2023-09-26

我需要检测一个保持5秒的移位键条目，并需要执行一些功能。

在javascript/JQ中，一个事件可以识别保持5秒的移位键条目，这可能吗？

请帮忙，提前谢谢。

这就行了！

$(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>

检查这个小提琴

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

检查此

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>

相关文章：