Snel OnKeyUp's na mekaar

Status
Niet open voor verdere reacties.

SamWitse

Gebruiker
Lid geworden
20 nov 2008
Berichten
28
Hallo,

Ik heb een function gevonden die de cursorpositie geeft.
Dit werkt prima. Als je tekst typt, zie je in het textveld dat de cursorpositie steeds vergroot: 1,2,3,4,... enz.
Behalve als je heel snel typt. Dan geeft hij sommige posities dubbel, vb: 1,2,3,3,5,6,6,8,...
Ik vermoed dat dit komt omdat een tweede oproep van de functie reeds start als de eerste nog bezig is.
Is dit zo, en zo ja, hoe kan dit verholpen worden?

Hieronder de volledige testpagina. Typ maar eens heel snel willekeurige tekens in de textarea, en je zult zien wat ik bedoel.

Bedankt voor alle hulp.
Sam.


Code:
<html>
<head>
</head>
<body>
<script type="text/javascript" language="JavaScript">
function doGetCaretPosition (ctrl) {
   var CaretPos = 0;   // IE Support
   if (document.selection) {
   ctrl.focus ();
      var Sel = document.selection.createRange ();
      Sel.moveStart ('character', -ctrl.value.length);
      CaretPos = Sel.text.length;
   }
   // Firefox support
   else if (ctrl.selectionStart || ctrl.selectionStart == '0')
      CaretPos = ctrl.selectionStart;
   document.all.Pos.value = document.all.Pos.value + ',' + CaretPos ;
}
</script>
<form>
<textarea name="veld" cols="50" rows="3" wrap="virtual" onkeyup="doGetCaretPosition(this)"></textarea><BR>
<input type ="text" name="Pos" size="130">
</form>
</body>
</html>
 
Probeer eens onkeypress in plaats van onkeyup. onkeyup is niet erg betrouwbaar aangezien het best kan dat twee toetsen tegelijkertijd los worden gelaten terwijl er geen tekst bij is gekomen.
 
Laatst bewerkt:
Inderdaad, onKeyPress werkt goed.
Eigenaardig dat onKeyUp-events niet mooi gebufferd worden en één na één uitgevoerd worden.

Heel erg stijf bedankt!:)
 
het is niet eigenaardig als je er over nadenkt, onkeyup gaat samen met het los laten van een toets. Dat betekent niet per definitie dat er een teken is ingevoerd in de textarea. Het kan dus best dat er twee toetsen tegelijkertijd los worden gelaten (of vlak na elkaar) zonder dat de caret positie is veranderd:thumb:
 
Ik denk niet alleen, ik denk ook na;)
"Tegelijk" kan normaal niet, er zijn altijd een paar nanoseconden tussen twee 'ups'. Trouwens, de tekens in de textarea worden nà mekaar afgebeeld, er worden geen tekens overgeslagen, dus waarom worden de onKeyUp-events dan niet na mekaar uitgevoerd.
Als je toetsen indrukt die de caret niet doen verspringen (vb. ¨ of ^) dan is het effect te verklaren, maar helaas was ik zo snugger om die toetsen niet te betrekken in mijn testje.

Nu nog één probleempje op te lossen: de onKeyPress wordt uitgevoerd vóór de letter in de textarea afgebeeld wordt; de onKeyUp erna. Voor dit eenvoudig voorbeeldje van geen belang (enkel dat de telling begint bij positie 0 ipv 1), maar voor mijn eigenlijke code een vervelend ding.

Sam
 
natuurlijk is het niet precies tegelijkertijd, maar er is een bepaalde interval is waarmee tekens ingevoerd worden als er een toets ingedrukt is. Het is heel goed mogelijk om meerdere toetsen los te laten binnen die interval wat voor je script dus tot gevolg heeft dat er twee onkeyups worden getriggered terwijl er geen tekens bij kwamen en dus ook de caret positie niet veranderde. Dit gebeurt natuurlijk alleen als je meerdere toetsen tegelijkertijd indrukt maar dat is behoorlijk waarschijnlijk wanneer je op je toetsenboord zit te rammen.

Het is mogelijk om in het onkeypress event te achterhalen welk teken er binnenkort bijgevoegd gaat worden (binnenkort is direct na het event). Controleer of het een character is wat ruimte in neemt, controleer of er een selectie was en daarmee kun je de toekomstige positie van de caret heel makkelijk berekenen.

Lees hier voor specifieke informatie:
http://www.quirksmode.org/js/keys.html
 
Laatst bewerkt:
Glest,
Heel erg bedankt voor de link!
Er staat echter iets in dat mij niet vrolijk maakt:
If you need to detect these keys, do yourself a favour and search for their keyCode onkeydown/up, and ignore both onkeypress and charCode.
Lijkt dat ik onKeyPress maar moet vergeten, en toch met onKeyDown/Up moet werken.

Op die website kun je de 3 events mooi testen. Grappig is dat als je een toets ingedrukt houdt, er meerdere KeyDown's gebeuren (repeat van de ingedrukte letter), en maar één KeyUp.
Dit verklaart wellicht het gedrag dat ik oorspronkelijk gemerkt heb: KeyDowns (en KeyPress) worden gebufferd; KeyUps niet.
Een klein maar belangrijk verschil.
 
Dat gedrag geldt niet in alle browsers. Probeer onkeydown maar eens in opera. Maar dat je charCode en onkeypress beter kan negeren geldt alleen als je toetsen als de pijltjes toetsen of shift etc wilt gebruiken. Voor toetsen die input genereren is keypress het betrouwbaarste.

Overigens, het gedrag in je voorbeeld is geen bug, het is hoe het hoort te werken. onkeyup is het enige echt consistente event, maar niet persé wat je wilt. Het wordt gevuurd zodra er een toets los gelaten wordt. Dat is het. Het is logisch dat je meerdere toetsen los kunt laten zonder dat de caret verplaats.

onkeypress wordt gevuurd zodra er input wordt gegenereerd in alle browsers, en voor meer toetsen in sommige browsers. onkeydown vuurt voor de meeste toetsen. In de meeste browsers met de zelfde frequentie als onkeypress, maar in Opera wordt het maar één keer gevuurd totdat je de toets weer los gelaten hebt. onkeydown is dus zoiezo niet wat je wilt.

Ik heb trouwens geen idee wat je wilt. Het is best mogelijk dat onkeyup wel is wat je wilt. Er gebeurt immers niks raars in het voorbeeld wat je gaf.

Maar als je veranderende tekst in een textarea wilt verwerken dan is onkeypress echt het event wat je wilt.
 
Laatst bewerkt:
Heel erg bedankt voor de uitleg.
Ik wou registreren welke tekens op welke plaats ingetikt worden.
onkeypress doet het wonderwel.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan