Få [Enter] til at udløse et 'klik'

[Bertel Lund Hansen]

Jeg har følgende to linjer i min kode:

<p>Round number: <input type='text' id='rond_nr$n' size='4'>
<button onclick='roundFunction($n)'>Set round</button></p>

Det virker fint, men man er nødt til at klikke på knappen for at
udløse funktionskaldet. Kan man få [Enter] (i inputfeltet) til at
gøre det samme (med eller uden JavaScript)?

[Kim Ludvigsen]

Post by Bertel Lund Hansen
<p>Round number: <input type='text' id='rond_nr$n' size='4'>
<button onclick='roundFunction($n)'>Set round</button></p>
Det virker fint, men man er nødt til at klikke på knappen for at
udløse funktionskaldet. Kan man få [Enter] (i inputfeltet) til at
gøre det samme (med eller uden JavaScript)?

Du kan bruge onblur på inputfeltet, så vil funktionen udløses, når
feltet forlades (uanset om det sker med Enter eller ved at fokus flyttes
med musen).
https://www.w3schools.com/jsref/event_onblur.asp

[Jan Hansen]

Det overstiger mine evner, at stoppe en variabel ind i noget
addEventListener. Hvis du finder fidusen hører jeg gerne nærmere.
Men her er en lappeløsning, der finder den rigtige værdi udfra
document.activeElement.id :

for (n=0; n<3; ++n) {
if (tiDisp[n]) {
document.getElementById('rond_nr'+n)
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
tjekfelt();
}
});
}
}

function tjekfelt() {
x=document.activeElement.id;
for (n=0; n<3; ++n) {
if (x == 'rond_nr'+n) roundFunction(n);
}
}


Det er nok nemmere at bruge onBlur, man skal bare trykke på
tab i stedet for enter.

[Bertel Lund Hansen]

Post by Jan Hansen
Det overstiger mine evner, at stoppe en variabel ind i noget
addEventListener. Hvis du finder fidusen hører jeg gerne nærmere.
Men her er en lappeløsning, der finder den rigtige værdi udfra

Jeg havde prøvet noget lignende idet jeg fandt inspiration på
W3's sider, men hverken min eller din løsning virker. Da det ikke
er så vigtigt, vil jeg nok ikke kæmpe ret meget for at få det til
at du.

Post by Jan Hansen
Det er nok nemmere at bruge onBlur, man skal bare trykke på
tab i stedet for enter.

Jeg prøvede med onblur (og onfocusout), men begge har den ulempe
at et klik på de hvide omgivelser indlæser værdien fra feltet, og
det er ikke logisk.

[Jan Hansen]

Post by Bertel Lund Hansen
Jeg havde prøvet noget lignende idet jeg fandt inspiration på
W3's sider, men hverken min eller din løsning virker.

Det skulle det gerne, det virker da lokalt.
Bruger du ikke firefox ?

[Bertel Lund Hansen]

Post by Jan Hansen
Det skulle det gerne, det virker da lokalt.
Bruger du ikke firefox ?

Jo, og Web Console (som jeg nu har fundet ud af at bruge) melder
heller ingen fejl, men rundetallet forbliver det samme når jeg
trykker [Enter].

[Jan Hansen]

Post by Bertel Lund Hansen

Post by Jan Hansen
Det skulle det gerne, det virker da lokalt.
Bruger du ikke firefox ?

Jo, og Web Console (som jeg nu har fundet ud af at bruge) melder
heller ingen fejl, men rundetallet forbliver det samme når jeg
trykker [Enter].

Virker det her? http://www.sniper-pistol.com/bridge.html
Det er den udgave, jeg hentede og tilføjede det på.

[Bertel Lund Hansen]

Post by Jan Hansen
Virker det her? http://www.sniper-pistol.com/bridge.html

Ja.

Post by Jan Hansen
Det er den udgave, jeg hentede og tilføjede det på.

Mystisk. Måske kæmper jeg alligevel videre.

[Dennis Munding]

Post by Bertel Lund Hansen
<p>Round number: <input type='text' id='rond_nr$n' size='4'>
<button onclick='roundFunction($n)'>Set round</button></p>
Det virker fint, men man er nødt til at klikke på knappen for at
udløse funktionskaldet. Kan man få [Enter] (i inputfeltet) til at
gøre det samme (med eller uden JavaScript)?

Det virker (mig bekendt) kun med type="submit".

Jeg testede denne lille ændring i din kode:

<form action="#togglediv2">
<p>Round number: <input type='text' id='rond_nr2' size='4'>
<input type="submit" onclick='roundFunction(2)' value="Set round" /></p>
</form>


Umiddelbart ser det ud til at virke.

Bemærk!
Det er KUN Set round-knappen og tilhørende input-felt, der er wrappet i
form-tagget.
På den måde skulle det ikke påvirke de andre knapper/områder.

[Jan Hansen]

Post by Dennis Munding
<form action="#togglediv2">
<p>Round number: <input type='text' id='rond_nr2' size='4'>
<input type="submit" onclick='roundFunction(2)' value="Set round" /></p>
</form>
Umiddelbart ser det ud til at virke.

Det fungerer vist perfekt, når timerne er startet, kører de videre
hvor de er nået til, og de andre timere beholder deres runde numre.
Jeg fjerner mine javascript eksperimenter igen.

[Bertel Lund Hansen]

Post by Dennis Munding
<form action="#togglediv2">
<p>Round number: <input type='text' id='rond_nr2' size='4'>
<input type="submit" onclick='roundFunction(2)' value="Set round" /></p>
</form>
Umiddelbart ser det ud til at virke.

Smukt og enkelt. Tak.