CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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

Synes godt om

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?

Synes godt om

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>

Synes godt om

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)

Synes godt om

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?

Synes godt om

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"> 
<input id="admButton" class="skjul" type="button" value="Admin">
</body>

Synes godt om

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?

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02
js til asp backend Af keepy i JavaScript	1	11/10/202310:28	11/10/202313:46

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS