檢測釋放的密鑰而不使用keyup事件-Javascript
[英]Detect key released without using keyup event - Javascript
問題描述
IE似乎並不總是響應我的腳本之一中的鍵入事件。
我尋找一種檢測鑰匙是否已被釋放的替代方法。
考慮到按下的鍵會間隔一定時間重復一次按下事件（Mac上的修飾鍵除外），我認為可以增加變量並偵聽停止增加的點。 當它停止遞增時，鍵已被釋放？
不幸的是，有時候（並非總是如此），我的腳本在按住鍵的同時檢測到增量的結束。 如果反復按住短鍵不放，則失敗的可能性更大。 我已經用IE和FF測試過。
在檢查每個增量之間，我已經允許2秒鍾。 將Windows控制面板設置為最慢的鍵盤設置，一秒鍾可能就足夠了。
<!DOCTYPE html> <html> <head> <title>Detect keyup not using keyup event using Javascript</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> // opening variables var keyDownCount = 0; var nextLastTimeout1 = false; var nextLastTimeout2 = false; var lastCount = false; var nextCount = false; // function to compare the last two outcomes for keyDownCount by assigning them to variables lastCount and nextCount function nextLastCount() { if (lastCount) { nextCount = keyDownCount; if (lastCount === nextCount) { // clear any outstanding timeouts clearTimeout(nextLastTimeout1); clearTimeout(nextLastTimeout2); // they match, display the count in the html document.getElementById('matched-next-last').innerHTML = keyDownCount; } else { // clear any outstanding timeouts clearTimeout(nextLastTimeout1); clearTimeout(nextLastTimeout2); // reset variable lastCount = false; // they don't match, call the function again after allowing sufficient time for the key repetition rate to increment the keyDownCount nextLastTimeout1 = self.setTimeout("nextLastCount()", 2000); } } else { lastCount = keyDownCount; if (lastCount === nextCount) { // clear any outstanding timeouts clearTimeout(nextLastTimeout1); clearTimeout(nextLastTimeout2); // they match, display the count in the html document.getElementById('matched-next-last').innerHTML = keyDownCount; } else { // clear any outstanding timeouts clearTimeout(nextLastTimeout1); clearTimeout(nextLastTimeout2); // reset variable nextCount = false; // they don't match, call the function again after allowing sufficient time for the key repetition rate to increment the keyDownCount nextLastTimeout2 = self.setTimeout("nextLastCount", 2000); } } } // keydown listener document.addEventListener('keydown', function(e) { if (!e) e = window.event; // listen for alt key down if (e.altKey) { if (keyDownCount === 0) { // call nextLastCount() to start comparing the last two outcomes for keyDownCount // allow sufficient time for the key repetition rate to increment keyDownCount setTimeout("nextLastCount()", 2000); } // increment the counter on each keydown repeat keyDownCount++; // display the current count in the html document.getElementById('display-count').innerHTML = keyDownCount; } }); // keyup listener document.addEventListener('keyup', function(e) { if (!e) e = window.event; // listen for alt key released if (!e.altKey) { // clear any outstanding timeouts clearTimeout(nextLastTimeout1); clearTimeout(nextLastTimeout2); // reset the counter and the html fields when the keys are released keyDownCount = 0; document.getElementById('display-count').innerHTML = keyDownCount; document.getElementById('matched-next-last').innerHTML = ""; } }); </script> </head> <body> <p>Hold down the alt key to start the counter, relese to reset.</p> <p>keyDownCount is: <span id="display-count"></span> </p> <p>Matching next and last detected on key count of: <span style="color:blue;" id="matched-next-last"></span> </p> </body> </html>
2 個解決方案
解決方案1
1 2015-04-27 17:16:46
萬一其他人可能需要它，我按以下方法解決了。 簡化的代碼，只有一個超時。
在Firefox中，按住alt鍵的同時按下空格鍵將模擬非激活事件。
<!DOCTYPE html>
<html>
<head>
<title>Detect keyup without using keyup event</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
// opening variables
var keyDownCount = 0;
var nextLastTimeout = false;
var nextCount = false;
var lastCount = false;
var nextCountTime = false;
var lastCountTime = false;
// function to compare the last two outcomes for keyDownCount by assigning them to variables lastCount and nextCount
function nextLastCount() {
if (lastCount) {
nextCount = keyDownCount;
// record the time for use in calculating the keyboard delay
nextCountTime = +new Date(); // milliseconds since 01 January, 1970
if (lastCount === nextCount) {
// they match, display the count in the html
document.getElementById('matched-next-last').innerHTML = keyDownCount;
}else{
// reset variable
lastCount = false;
}
}else{
lastCount = keyDownCount;
// record the time for use in calculating the keyboard delay
lastCountTime = +new Date(); // milliseconds since 01 January, 1970
if (lastCount === nextCount) {
// they match, display the count in the html
document.getElementById('matched-next-last').innerHTML = keyDownCount;
}else{
// reset variable
nextCount = false;
}
}
}
// keydown listener
document.addEventListener('keydown',function(e) {
if(!e) e = window.event;
// listen for alt key down
if (e.altKey) {
// increment the counter on each keydown repeat
keyDownCount++;
// display the current count in the html
document.getElementById('display-count').innerHTML = keyDownCount;
// see below
clearTimeout(nextLastTimeout);
// call function
nextLastCount();
// calculate the keyboard delay i.e. time between repeated keystrokes
if (nextCountTime && lastCountTime) {
// returns an always positive value in milliseconds
var keyboardDelay = Math.abs(nextCountTime - lastCountTime);
}else{
// in the first few increments both count times are not available, use an estimate
var keyboardDelay = 3000; // also 500ms added below
}
// call nextLastCount() again, but on a delay that exceeds the keyboard delay
// .. for safety, add 500ms to the calculated / estimated keyboard delay
// this timeout will only complete when the increments stop
// .. see clearTimeout(nextLastStickyTimeout) above
nextLastTimeout = setTimeout("nextLastCount()",keyboardDelay + 500);
}
});
// keyup listener
document.addEventListener('keyup',function(e) {
if(!e) e = window.event;
// listen for alt key released
if (!e.altKey) {
// clear any outstanding timeouts
clearTimeout(nextLastTimeout);
// reset the counter and the html fields when the keys are released
keyDownCount = 0;
document.getElementById('display-count').innerHTML = keyDownCount;
document.getElementById('matched-next-last').innerHTML = "";
}
});
</script>
</head>
<body>
<p>Hold down the alt key to start the counter, release to reset.</p>
<p>In Firefox, pressing the spacebar whilst the alt key is down will simulate a non keyup event</p>
<p>keyDownCount is: <span id="display-count"></span></p>
<p>Matching next and last detected on key count of: <span style="color:blue;"id="matched-next-last"></span></p>
</body>
</html>
解決方案2
0 2015-04-27 12:40:27
這似乎應該已經解決。 這是關於最好的輸入庫的一個問題： 這是最好的Javascript鍵盤事件庫。（熱鍵，快捷鍵）
理想情況下，您不想重新發明輪子。
Alt代碼和jQuery keyup事件-釋放Alt鍵時未更新值
[英]Alt Codes and jQuery keyup event - Value not updated when alt key is released
如何檢測在Javascript鍵盤事件中何時按下Shift + NumKey？
[英]How to detect when Shift+NumKey is pressed in Javascript keyup event?
是否可以在不使用鍵碼javascript的情況下檢測到按下輸入鍵
[英]Is it possible to detect that enter key is pressed without using key codes javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.