Open en sluit <details> met een (functie)toets

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Rahmelow

Jan Rahmelow

04/08/2023 22:35:38
Quote Anchor link
Op mijn website kan informatie met een muisklik worden weergegeven. Deze informatie staat in <details>. Kan het display (ook) worden geopend en gesloten door op een toets te drukken (bijvoorbeeld F1)?
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.
 
PHP hulp

PHP hulp

13/07/2024 15:51:26
 
- Ariën  -
Beheerder

- Ariën -

04/08/2023 23:50:16
 
Jan R

Jan R

05/08/2023 08:00:42
Quote Anchor link
Praktisch voorbeeld :)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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
 
Jan Rahmelow

Jan Rahmelow

06/08/2023 17:34:59
Quote Anchor link
Dit is precies de code die ik zocht! Hartelijk dank.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.