Open en sluit <details> met een (functie)toets
Vrij zeker is dit alleen met Javascript mogelijk. En daar heb ik helaas helemaal geen verstand van, daarom zou ik enorm dankbaar zijn voor een praktische tip.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<title>Dialog test met keybord commands</title>
</head>
<body>
<details id="mydetails">
<summary>Onderwerp</summary>
<p>This is an HTML dialog! Click the button to close it.</p>
<button id="close">Close details</button>
</details>
<button id="show">Show Me the details!</button>
<p>Je kan de dialog openen met Alt-o en sluiten met Control-c</p>
<p>Ook kan je de dialog openen met Alt-F2 en sluiten met Alt-F3</p>
<script> /* Thanks to Eiji Kitamura for the dialog demo which you can see at https://demo.agektmr.com/dialog/ */
var details = document.getElementById('mydetails');
document.querySelector('#show').onclick = function() {
details.open=true;
};
document.querySelector('#close').onclick = function() {
details.open=false;
};
document.addEventListener('keydown', function(event) {
if (event.key == 'o' && event.altKey) {
details.open=true;
}
if (event.key == 'c' && event.ctrlKey) {
details.open=false;
}
if (event.key == 'F2' && event.altKey) {
details.open=true;
}
if (event.key == 'F3' && event.altKey) {
details.open=false;
}
});
</script>
</body>
</html>
<html>
<head>
<title>Dialog test met keybord commands</title>
</head>
<body>
<details id="mydetails">
<summary>Onderwerp</summary>
<p>This is an HTML dialog! Click the button to close it.</p>
<button id="close">Close details</button>
</details>
<button id="show">Show Me the details!</button>
<p>Je kan de dialog openen met Alt-o en sluiten met Control-c</p>
<p>Ook kan je de dialog openen met Alt-F2 en sluiten met Alt-F3</p>
<script> /* Thanks to Eiji Kitamura for the dialog demo which you can see at https://demo.agektmr.com/dialog/ */
var details = document.getElementById('mydetails');
document.querySelector('#show').onclick = function() {
details.open=true;
};
document.querySelector('#close').onclick = function() {
details.open=false;
};
document.addEventListener('keydown', function(event) {
if (event.key == 'o' && event.altKey) {
details.open=true;
}
if (event.key == 'c' && event.ctrlKey) {
details.open=false;
}
if (event.key == 'F2' && event.altKey) {
details.open=true;
}
if (event.key == 'F3' && event.altKey) {
details.open=false;
}
});
</script>
</body>
</html>
Met dank aan w3schools, html.com en javascript.info
F1 is trouwens al gekoppeld aan Help
De meeste F-toetsen hebben al een functie
Jan
Gewijzigd op 05/08/2023 08:11:48 door Jan R