[JS] Checken of CTRL ingedrukt is met een onclick event

[Verwijderd]

Heb al op Google en GoT gezocht naar een antwoord, maar ik heb alleen stokoude methodes gevonden als http://www.webreference.com/js/column9/newmouseevents.html.

Ik wil zorgen dat de gebruiker met onclick rijen uit een tabel kan selecteren, en met CTRL+click meerdere rijen kan selecteren (of rijen deselecteren (hoe dat ook heet )).

Wat is de beste huidige methode om de CTRL knop te loggen met een onclick event met JavaScript?

Ik test momenteel alles eerst in Firefox en daarna in IE 6 etc. De tabel wordt opgebouwd d.m.v. het DOM.

Alvast bedankt!

[ Voor 3% gewijzigd door Verwijderd op 24-08-2005 12:40 ]

[crisp]

JavaScript:

function checkKey(e)
{
    if (!e) e = window.event;
    if (e.ctrlKey)
    {
        alert('Controlkey is ingedrukt!');
    }
}

Wel zorgen dat je het event object meestuurd voor standards-compliant browsers; bij el.onclick = checkKey; gaat dat automagisch, bij inline eventhandlers kan dat dmv onclick="checkKey(event)"

[Verwijderd]

Thanks, good sir, werkt als een sneltrein.

Met Firefox krijg ik trouwens een oranje rand om de tabel cell heen als erop klik met CTRL ingedrukt. Kan ik hier iets tegen doen? Ziet er namelijk niet echt lekker (lees: professioneel) uit...

[djluc]

Volgens mij moet je dan even de link een blur() geven na het klikken.

[Verwijderd]

djluc schreef op woensdag 24 augustus 2005 @ 14:22:
Volgens mij moet je dan even de link een blur() geven na het klikken.

Let op; de onclick event is van de table row (<tr>), dus niet van een link. Als ik blur(); toevoeg krijg ik de volgende error:

JavaScript:

// samengevatte code (eerder gedefinieerde variabelen even weggelaten)
tr.onclick = function() {
    blabla();
    this.blur();
    return false;
}

// Error: this.blur is not a function.

return false; haalt ook niet zo veel uit. Misschien is het een feature van de Firefox Web Developer extension?

[ Voor 3% gewijzigd door Verwijderd op 24-08-2005 14:47 ]

[André]

Verwijderd schreef op woensdag 24 augustus 2005 @ 14:46:

Misschien is het een feature van de Firefox Web Developer extension?

Ik weet het wel zeker

[Verwijderd]

Ik zal dit nog even in hetzelfde topic neerzetten;

Het volgende, ik wil namelijk zorgen dat de tabel kolommen resizable zijn door JavaScript. Ik kon me nog herinneren dat ik met CSS de cursors kon veranderen zodat het duidelijk is dat de kolommen resizable zijn.

De tabel is zo opgebouwd (dynamisch via de DOM):

HTML:

<table>
  <thead>
    <tr>
      <th>header</th>
      <th>nog zo'n header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bla</td>
      <td>enzo</td>
    </tr>
  </tbody>
</table>

Volgens mij loop ik nu tegen het eerste probleem aan dat de cursor alleen veranderd moet worden wanneer de muis over de randen van de <th> elementen heen gaat. Is dit met voorgaande HTML structuur ongelooflijk lastig of valt dit mee?

Weet iemand trouwens goed leesmateriaal wat ik kan doornemen hierover?

Alvast bedankt!

[marty]

misschien dat je je css zo kan maken dat er een space zitten tussen de cellen en dan geef je de tabel de gewenste cursor bij een mouse-over en de cellen zet je expliciet op een normale pointer. Misschien dat ie 'm dan alle op de randen pakt.

[Verwijderd]

marty schreef op woensdag 24 augustus 2005 @ 16:35:
misschien dat je je css zo kan maken dat er een space zitten tussen de cellen en dan geef je de tabel de gewenste cursor bij een mouse-over en de cellen zet je expliciet op een normale pointer. Misschien dat ie 'm dan alle op de randen pakt.

Very nice! Werkt! Thanks!

[edit] Te vroeg gejuigd, ik wil namelijk de resizer cursor alleen tussen de <th> elementen in de <thead>. De border-spacing tussen de tabel ziet ie als <table> en niet als <thead> of <tbody>...

[ Voor 28% gewijzigd door Verwijderd op 24-08-2005 17:16 ]

[Verwijderd]

André schreef op woensdag 24 augustus 2005 @ 14:57:
[...]

Ik weet het wel zeker

Ik weet na het deïnstalleren van de Web Developer extension wel zeker dat het daar niet aan ligt...

Weet iemand een manier om deze Firefox functionaliteit uit te zetten? 'Developer-side' dan...

[Verwijderd]

Heel simpel. Je moet dan de functie preventDefault() aanroepen van het meegestuurde event object, dus, om in de stijl van crisp te blijven:

JavaScript:

function checkKey(e)
{
    if (!e) e = window.event;
    if (e.ctrlKey)
    {
        alert('Controlkey is ingedrukt!');
        e.preventDefault();
    }
}

[Verwijderd]

Very nice, thanks!