Toon posts:

[dHTML] DIV keyUp / keyDown events return false?

Pagina: 1
Acties:

maandag 20 maart 2006 14:55

Acties:
  • chuxiej
  • Registratie: Februari 2001
  • Laatst online: 13-07-2020

chuxiej

Topicstarter
Ik ben nu al een aantal dagen bezig met een dropdown menu te maken (dmv een DIV) wat samenwerkt met wat ajax.
Nu is het de bedoeling dat als je op de key down of key up (keycode 38 of 40) de geselecteerde plaats in het dropdown menu 1 omhoog of 1 omlaag gaat.

Nu lukt dit allemaal alleen als ik de key los laat wordt de plaats gedeselecteerd.
Ik ben nu al uren bezig met alleen deze functionaliteit en het wil maar niet lukken, heb echt alles geprobeerd.

Tevens heb ik geprobeerd bij andere alike menu's het af te kijken zoals google suggests, helaas kom ik hier echt niet verder mee, het probleem gaat maar niet weg.

Dit zijn de javascript functies:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

function keyPress(event) {
    if ( !bBrowserOk ) return;
    
    if ( event.keyCode == 13 ) {
        return false;
    }
    
    if ( event.keyCode == 40 ) { return false; }
    if ( event.keyCode == 38 ) { return false; }
}

function KeyDown(event) {
    if (!inputFocus) {
        return true;
    }
    
    // if ( event.keyCode == 34 ) { scrollUp(4); }
    // if ( event.keyCode == 33 ) { scrollDown(4); }
    if ( event.keyCode == 40 ) { scrollDown(1); }
    if ( event.keyCode == 38 ) { scrollUp(1); }
    
    if ( event.keyCode == 40 ) { return false; }
    if ( event.keyCode == 38 ) { return false; }
}
function KeyUp(event) {
    if (!inputFocus) {
        return true;
    }
    
    if ( event.keyCode == 13 ) { ret(); }
    if ( event.keyCode == 27 ) { ret(); }
    if ( event.keyCode == 9 ) { ret(); }
    
    if ( event.keyCode == 40 ) { return false; }
    if ( event.keyCode == 38 ) { return false; }
}
function ret(bEnter) {
    if ( !bBrowserOk ) return;
    
    if (selectedSuggest > 0) {
        $('plaatsnaam').value = document.getElementById('sb_' + selectedSuggest).innerHTML;
        
        selectedSuggest = false;
    }
    
    sbHide()
    $('plaatsnaam').focus();
    
    return false;
}
function scrollDown(steps) {
    if ($('sl').style.display != 'block') {
        return false;
    }
    
    if (selectedSuggest > 0) {
        selectedSuggest = parseInt(selectedSuggest);
        
        if (selectedSuggest == $('sl').childNodes.length) {
            return false;
        }
        if (!$('sb_' + selectedSuggest)) {
            return false;
        }
        
        // remove prev
        $('sb_' + selectedSuggest).className = 'suggestion';
        
        // next
        selectedSuggest = selectedSuggest + steps;
        if (!$('sb_' + selectedSuggest)) {
            return false;
        }
        
        $('sb_' + selectedSuggest).className = 'suggestion_hover';
    } else {
        // first
        selectedSuggest = 1;
        $('sb_1').className = 'suggestion_hover';
    }
    
    return false;
}
function scrollUp(steps) {
    if ($('sl').style.display != 'block') {
        return false;
    }
    
    if (selectedSuggest > 0) {
        selectedSuggest = parseInt(selectedSuggest);
        
        if (selectedSuggest == 1) {
            return false;
        }
        if (!$('sb_' + selectedSuggest)) {
            return false;
        }
        
        // remove prev
        $('sb_' + selectedSuggest).className = 'suggestion';
        
        // prev
        selectedSuggest = selectedSuggest - steps;
        if (!$('sb_' + selectedSuggest)) {
            return false;
        }
        
        $('sb_' + selectedSuggest).className = 'suggestion_hover';
    } else {
        // first
        selectedSuggest = $('sl').childNodes.length;
        $('sb_' + $('sl').childNodes.length).className = 'suggestion_hover';
    }
    
    return false;
}


Alvast bedankt voor de hulp.
P.S. $('id') staat voor document.getElementById() in prototype.js

[ Voor 16% gewijzigd door chuxiej op 20-03-2006 15:00 ]

www.dannyhiemstra.nl

maandag 20 maart 2006 15:17

Acties:
  • Michali
  • Registratie: Juli 2002
  • Laatst online: 09-12-2025

Michali

Het lijkt me dat ret() aangeroepen wordt op een of andere manier. Dit is vrij simpel te debuggen. Gewoon een alert in keyUp, keyDown en keyPress plaatsen, zodat je weet wanneer ze aangeroepen worden en welke waarde keyCode heeft. Niet echt verbazend dat je er niet uit komt, je code is ook erg vaag. scrollUp, scrollDown en ret returnen waardes, maar je doet er niets mee. Alle returns in die functies zijn dus overbodig en zou je er uit kunnen halen.

Noushka's Magnificent Dream | Unity

maandag 20 maart 2006 15:58

Acties:
  • chuxiej
  • Registratie: Februari 2001
  • Laatst online: 13-07-2020

chuxiej

Topicstarter
Ik heb ook geprobeerd de calls naar de ret() functie weg te halen en dit werkt ook niet.
Als ik een alert doe bij de events laat die ze gewoon op het goede moment zien, probleem is volgens mij iets dat de down / up keys niet worden gecanceled, want als ik key down druk gaat die een stapje naar beneden daarna deselect die hem weer en gaat de cursor in het input field een stapje naar links.
Echt heel raar..

Hierbij een geupdate versie
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/*
 * Key Events
 */
function KeyDown(event) {
    if (!inputFocus) {
        return;
    }
    
    if ( event.keyCode == 40 ) {
        scrollDown(1);
        return false;
    }
    if ( event.keyCode == 38 ) {
        scrollUp(1);
        return false;
    }
}
function KeyUp(event) {
    if (!inputFocus) {
        return;
    }
    /*
    if ( event.keyCode == 13 ) { ret(); }
    if ( event.keyCode == 27 ) { ret(); }
    if ( event.keyCode == 9 ) { ret(); } */
    
    if ( event.keyCode == 40 || event.keyCode == 38 ) {
        return false
    }
}
function ret(bEnter) {
    if ( !bBrowserOk ) return;
    
    if (selectedSuggest > 0) {
        $('plaatsnaam').value = document.getElementById('sb_' + selectedSuggest).innerHTML;
        
        selectedSuggest = false;
    }
    
    sbHide()
    $('plaatsnaam').focus();
}
function scrollDown(steps) {
    if ($('sl').style.display != 'block') {
        return;
    }
    
    if (selectedSuggest > 0) {
        selectedSuggest = parseInt(selectedSuggest);
        
        if (selectedSuggest == $('sl').childNodes.length) {
            return;
        }
        if (!$('sb_' + selectedSuggest)) {
            return;
        }
        
        // remove prev
        $('sb_' + selectedSuggest).className = 'suggestion';
        
        // next
        selectedSuggest = selectedSuggest + steps;
        if (!$('sb_' + selectedSuggest)) {
            return;
        }
        
        $('sb_' + selectedSuggest).className = 'suggestion_hover';
    } else {
        // first
        selectedSuggest = 1;
        $('sb_1').className = 'suggestion_hover';
    }
}
function scrollUp(steps) {
    if ($('sl').style.display != 'block') {
        return;
    }
    
    if (selectedSuggest > 0) {
        selectedSuggest = parseInt(selectedSuggest);
        
        if (selectedSuggest == 1) {
            return;
        }
        if (!$('sb_' + selectedSuggest)) {
            return;
        }
        
        // remove prev
        $('sb_' + selectedSuggest).className = 'suggestion';
        
        // prev
        selectedSuggest = selectedSuggest - steps;
        if (!$('sb_' + selectedSuggest)) {
            return;
        }
        
        $('sb_' + selectedSuggest).className = 'suggestion_hover';
    } else {
        // first
        selectedSuggest = $('sl').childNodes.length;
        $('sb_' + $('sl').childNodes.length).className = 'suggestion_hover';
    }
}


en de html
HTML:
1

<input type="text" name="plaatsnaam" id="plaatsnaam" size="60" autocomplete="off" style="width: 300px;" onfocus="setFocus(true)" onblur="setFocus(false)" onkeydown="KeyDown(event)" onkeyup="KeyUp(event); request();" />

www.dannyhiemstra.nl

Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq