Jak wykryć naciśnięcie klawisza escape z czystym JS lub jQuery?
Możliwy duplikat:
jaki kod klawisza dla klawisza escape z jQuery
Jak wykryć naciśnięcie klawisza escape W IE, Firefox i Chrome?
Poniższy kod działa w IE i alarmy 27
, natomiast w Firefoksie alarmy 0
$('body').keypress(function(e){
alert(e.which);
if(e.which == 27){
// Close my modal window
}
});
10 answers
Uwaga: keyCode
jest staje się przestarzałe , zamiast tego użyj key
.
function keyPress (e) {
if(e.key === "Escape") {
// write your logic here.
}
}
Fragment Kodu:
var msg = document.getElementById('state-msg');
document.body.addEventListener('keypress', function(e) {
if (e.key == "Escape") {
msg.textContent += 'Escape pressed:'
}
});
Press ESC key <span id="state-msg"></span>
keyCode
staje się przestarzały
Wydaje się
keydown
ikeyup
działać, chociażkeypress
może nie
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-19 11:44:18
Zdarzenie keydown
będzie działać poprawnie Dla Escape i ma tę zaletę, że pozwala używać keyCode
we wszystkich przeglądarkach. Ponadto, musisz dołączyć słuchacza do document
, a nie do ciała.
Aktualizacja Maj 2016
keyCode
jest obecnie w trakcie deprecjacji i większość nowoczesnych przeglądarek oferuje key
właściwość teraz, chociaż nadal będziesz potrzebował awaryjnego wsparcia dla przyzwoitej przeglądarki na razie (w momencie pisania bieżących wydań Chrome i Safari nie obsługują it).
Aktualizacja Wrzesień 2018
evt.key
jest teraz obsługiwany przez wszystkie nowoczesne przeglądarki.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
alert("Escape");
}
};
Click me then press the Escape key
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-05 13:43:02
Używając JavaScript Możesz sprawdzić działanie jsfiddle
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
};
Używając jQuery Możesz sprawdzić działanie jsfiddle
jQuery(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-11 06:06:43
Sprawdź keyCode
&& which
& keyup
|| keydown
$(document).keydown(function(e){
var code = e.keyCode || e.which;
alert(code);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-08 15:47:30
Poniżej znajduje się kod, który nie tylko wyłącza klawisz ESC, ale także sprawdza stan, w którym został naciśnięty i w zależności od sytuacji wykona akcję lub nie.
W tym przykładzie,
e.preventDefault();
Wyłączy działanie klawisza ESC.
Możesz zrobić wszystko, aby ukryć div za pomocą tego:
document.getElementById('myDivId').style.display = 'none';
Gdzie klawisz ESC jest również brany pod uwagę:
(e.target.nodeName=='BODY')
Możesz usunąć tę część warunku if, jeśli chcesz zastosować ją do wszystkich. Albo ty może być tu kierowane wejście, Aby zastosować tę akcję tylko wtedy, gdy kursor znajduje się w polu wprowadzania.
window.addEventListener('keydown', function(e){
if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
e.preventDefault();
return false;
}
}, true);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-03 04:07:58
Najlepszym sposobem jest stworzenie funkcji dla tego
FUNCTION:
$.fn.escape = function (callback) {
return this.each(function () {
$(document).on("keydown", this, function (e) {
var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
if (keycode === 27) {
callback.call(this, e);
};
});
});
};
Przykład:
$("#my-div").escape(function () {
alert('Escape!');
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-21 09:04:20
W Firefoksie 78 użyj tego ("klawiatura" nie działa dla klawisza Escape):
function keyPress (e)(){
if (e.key == "Escape"){
//do something here
}
document.addEventListener("keyup", keyPress);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-17 12:10:10
Pure JS
Można dołączyć listener do zdarzenia keyUp
dla dokumentu.
Ponadto, jeśli chcesz się upewnić, że żaden inny klawisz nie jest wciśnięty wraz z klawiszem Esc
, możesz użyć wartości ctrlKey
, altKey
, i shifkey
.
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
console.log('Escape key was pressed with out any group keys')
}
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-20 14:04:47
Pure JS (no JQuery)
document.addEventListener('keydown',function(e){
if(e.keyCode == 27){
//add your code here
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-10 21:06:24
Myślę, że najprostszym sposobem jest waniliowy javascript:
document.onkeyup = function(event) {
if (event.keyCode === 27){
//do something here
}
}
Updated: Changed key = > keyCode
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-20 16:27:07