Avatar billede Kim Neesgaard Seniormester
26. marts 2021 - 09:24 Der er 8 kommentarer

document.addEventListener

Hej!
Jeg har en .NET side, hvor jeg gerne vil 'aflytte' en række indtastninger på tastaturet (efter opstart af siden) og til dette indsætter jeg følgende for at teste det:

<script>
document.addEventListener('keydown', event => { alert("Test") });
</script>

Når jeg starter siden normalt og trykker på en tast, så sker der ingenting.

Hvis jeg derimod klikker et tilfældigt sted på siden FØR jeg trykker på en tast, så virker det. Med mit begrænsede kendskab til Javascript undrer det mig, at der først skal et klik til, men det er der jo nok en god forklaring til??

På forhånd tak!


Mange hilsener
Kim Neesgaard
Avatar billede Birger52 Praktikant
15. april 2021 - 17:36 #1
Kan se ud somom siden ikke er focused eller seleted.
Din kode kræver, at der ikke er et andet element, der snupper tastningen og derefter annullerer den.
Det er ikke alle HTMLelementer, der kan selectes/fokuseres, men du kan prøve at sætte
docuent.focus();
og/eller document.select(); // vil selete alt indhold på siden, hvis det virker...
først i din js
Avatar billede Kim Neesgaard Seniormester
26. april 2021 - 09:42 #2
Min ide er, at jeg har en .NET administratorknap på siden og den skal ikke være tilgængelig for brugere, så jeg slukker den først i Javascript koden og så jeg vil gøre den synlig efter at have tastet en kode på siden, fx. 'admin'.

Min kode ser sådan ud:

<script>
    //document.focus();
    //document.select();
   
    //'Lytter' på formularen
    document.addEventListener('keydown', event => { Tastesamler() });
   
    var ts = ""  /*Initiering af samler til tasteslag for 'admin'*/
   
    window.onload = SlukAdmin;
           
    //Admin-knappen starter med at være usynlig
    function SlukAdmin() {     
        document.getElementById("admin").style.visibility = "hidden";
    }
   
    //Når der er tastet 'admin', så tændes admin-knappen
    function Tastesamler() {
     
        ts = ts + event.key;
        //alert("n: " + n);
        if (ts == "admin") {
            document.getElementById("admin").style.visibility = "visible";
            document.getElementById("btnAdmin").focus();
        }
    }
</script>

Hvis jeg aktiverer document.select()/focus(), så bliver admin-knappen synlig med det samme?
Avatar billede Birger52 Praktikant
26. april 2021 - 12:47 #3
Jeg bruger
style.display='block' (vises) og
style.display='none' (skjult)
i stedet for visibility.
Forskellen er at med display tager elementet ikke plads når det er skjult - det gør det med visibility.

Og problemet med din kode er formentlig, at js bliver kørt før siden er færdig med at loade. Ikke sikker på, at document kan tildeles events, før det er loaded. (Du kan gså prøve at bruge body i stedet for keydown).
Så du skal have det hele ind i en funktion der aktiverers af document.onload (eller window.onlad)
Det er ikke en god idé med globale variable. Brug et skjult element i stedet, når du får tingene til at fungere. (Der er ikke ret meget plads til slåfejl i din kode ;) )
Du har to forskellige elementer - 'admin' og 'btnAdmin'; hvad er admin?


<scripttype="text/javascript">
var ts = ""  /*Initiering af samler til tasteslag for 'admin'*/
window.addEventListener('load', InitMyKey);
window.addEventListener('load', SlukAdmin);

function InitMyKey() {
  document.addEventListener('keydown', Tastesamler);
}

function SlukAdmin() {    //Admin-knappen starter med at være usynlig
        document.getElementById("admin").style.visibility = "hidden";
    }
 
    //Når der er tastet 'admin', så tændes admin-knappen
function Tastesamler() {   
        ts = ts + event.key;
        //alert("n: " + n);
        if (ts == "admin") {
            document.getElementById("admin").style.visibility = "visible";
            document.getElementById("btnAdmin").focus();
        }
    }
</script>
Avatar billede Birger52 Praktikant
26. april 2021 - 14:41 #4
Et funktionelt eksempel
http://87.55.47.22/test/keys/
Klik på Admin, vil resette (fjerne tekst og skjule knap)
Avatar billede Kim Neesgaard Seniormester
27. april 2021 - 08:57 #5
Mange tak for dit svar - jeg ser på det!

Dit sidste link kan jeg ikke slå op?
Avatar billede Birger52 Praktikant
27. april 2021 - 11:54 #6
Underligt. Min egen server - der burde ikke være problemer.
Men jeg lægger koden her, så kan du selv plukke...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="da-DK">
<head>
<style type="text/css">
.skjul { display:none; }
.vis { display:block; }
</style>
<script type="text/javascript">
window.addEventListener('load', InitMyKey);

function InitMyKey() {
  var pw_elm=null, adm_elm=null;
  pw_elm = document.getElementById('pw');
  adm_elm = document.getElementById('admButton');
  if (pw_elm) {
    pw_elm.value = "";
    pw_elm.className = "skjul";
    }
  if (adm_elm) {
    adm_elm.className = "skjul";
    adm_elm.addEventListener('click', AdmClick);
    }
  document.addEventListener('keydown', CatchKey);
  }

function CatchKey(ev) {
  var pw_elm=null, adm_elm=null, tx='';
  pw_elm = document.getElementById('pw');
  adm_elm = document.getElementById('admButton');
  if (pw_elm) {
    tx = pw_elm.value;
    tx += ev.key;
    pw.value = tx;
    if (adm_elm && (tx == 'admin')) {
      adm_elm.className = 'block';
      }
    }
  }

function AdmClick() {
  var pw_elm=null, adm_elm=null;
  pw_elm = document.getElementById('pw');
  adm_elm = document.getElementById('admButton');
  if (pw_elm) {
    pw_elm.value = "";
    }
  if (adm_elm) {
    adm_elm.className = "skjul";
    }
}
</script>
</head>
<body>
<input id="pw" class="skjul" type="text" value="pass"> <!-- tekst til password -->
<input id="admButton" class="skjul" type="button" value="Admin">
</body>
Avatar billede Kim Neesgaard Seniormester
28. april 2021 - 20:49 #7
Kom til at tænke på, at jeg har et CSS keyframes slideshow kørende på siden - kan det være det man ikke rigtig kan flytte fokus fra andet end et manuelt museklik?
Avatar billede Birger52 Praktikant
29. april 2021 - 13:33 #8
Det kan vel godt tænkes.
Kender ikke så meget til CSS funktionalitet - foretrækker faktisk at have det i js, så tingene er adskilt.

CSS sætter normalt ikke fokus, så det bør ikke være det der laver ballade.

Du kan evt. tilføje en *:focus { border : 2px solid red; }
Det bør give en rød ramme om aktuelt fokuserede element - du vil så kunne se om dit slideshow stjæler fokus.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester