Avatar billede dennisbjorn Juniormester
23. februar 2011 - 08:40 Der er 7 kommentarer og
1 løsning

Skriv numre i et felt

Hej,

Jeg har nedenstående kode, hvor man kan klikke på et 'nummertastatur' (bruges på touch skærm). Tal bliver skrevet i et felt 'varenr'.
Det fungerer i princippet ok, men problemet er, at hvis man taster/klikker to tal hurtigt lige efter hinanden, så bliver kun det første tal skrevet i feltet.


<html>
<script type="text/javascript"> 
  function addNo(No) {
    document.forms.BrugerForm.varenr.value=document.forms.BrugerForm.varenr.value+No;
  }
</script>

<body>
<FORM name="BrugerForm">
<input type="text" maxlength="8" name="varenr" style="font-size:36px; width:280px;">
<br>
<input type="button" name="7" value="7" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('7');">
<input type="button" name="8" value="8" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('8');">
<input type="button" name="9" value="9" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('9');"><br>
<input type="button" name="4" value="4" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('4');">
<input type="button" name="5" value="5" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('5');">
<input type="button" name="6" value="6" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('6');"><br>
<input type="button" name="1" value="1" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('1');">
<input type="button" name="2" value="2" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('2');">
<input type="button" name="3" value="3" style="width:90px; height:90px; font-size:55px; background:#C2C4C7;" onClick="addNo('3');">
</FORM>
</body>
</html>
Avatar billede webblaster2011 Nybegynder
24. februar 2011 - 15:40 #1
Hvis jeg var dig ville jeg bruge jquery. Så vil du kunne gøre der på følgende måde hvis du sørger for at alle dine knapper har denne class="callAddNum" og giver dit input felt dette id : id="varenr"

$('.callAddNum').click(function(){

    $('#varenr').val($(this).attr('name'));

});
Avatar billede intenz Novice
24. februar 2011 - 20:27 #2
#1. Det løser ikke problemet. Desuden erstatter du bare værdien af feltet med det du indtaster (og du har valgt feltets name, og ikke value).

#0
Det er relativt komplekst, da du, næsten, gør det på den simpleste måde. At du når at trykke en gang mere inden funktionen bliver kørt er ikke lige til at ændre. Det kan godt lade sig gøre, men det bliver betydelig mere komplekst.

Jeg ved ikke om problemet er stort nok til at retfærdiggøre det? Brugeren kan jo bare trykke på knappen igen.
Avatar billede intenz Novice
24. februar 2011 - 20:34 #3
Du kan gøre det lidt mere effektivt ved at give varenr et id:
<input type="text" maxlength="8" name="varenr" id="varenr" style="font-size:36px; width:280px;">

Ændre alle dine input felter fra, f.eks.:
addNo('7');

til:
addNo(7);

Altså fjerne citationstegn.

Og så ændre din funktion til:
function addNo(No) {
  var e = document.getElementById('varenr');
  e.value = e.value+''+No;
}

Det vil, alt andet lige, være hurtigere at køre i browseren. Det vil ikke løse problemet helt, men måske få den til at køre hurtigt nok til, at man typisk ikke vil opleve problemet, selvom man trykker på 2 knapper hurtigt.
Avatar billede intenz Novice
24. februar 2011 - 20:36 #4
Eller endnu bedre, lave funktionen som:

var e = document.getElementById('varenr');
function addNo(No) {
  e.value = e.value+''+No;
}

Det er så ikke den kønne måde, ren syntax-mæssigt, men det vil være endnu hurtigere.
Avatar billede dennisbjorn Juniormester
25. februar 2011 - 07:50 #5
intenz - din løsning virker helt perfekt:-))
Den er jeg super glad for!
Avatar billede dennisbjorn Juniormester
25. februar 2011 - 10:41 #6
hmm..faktisk løser det ikke problemet helt (som du også selv nævner) - den er kun blevet en smule hurtigere.

Men hvis der nogle der har ide til løsning, hører jeg meget gerne...
Avatar billede werd Nybegynder
25. februar 2011 - 11:40 #7
@dennisbjorn
Funktionen er ret hurtig, er du sikker på at det ikke er browseren eller nok endnu mere sandsynligt hardwaren der er din flaskehals?
Avatar billede intenz Novice
27. februar 2011 - 19:53 #8
Eller måske 'onClick' eventen. Prøv at lav dem om til 'onmousedown'. Det vil få dine events til at blive kørt hurtigere. Jeg ved ikke om den fungerer med touch, men det vil jeg tro.
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