Stop Propagation of Space-Key
Hi there,
as a little side-project, I want to make a search engine that behaves similar to the "Just Type"-Feature of Palm webOS: When the user presses a key somewhere on my site, a box scrolls in containing the typed letters and the search results.
In order to realize that, I bound a "keydown" event to $(document). I have but one problem: the "space" key. It is correctly recognized, the space is concatenated to the search term; but then, the site scrolls down (found out it's the default action when pressing space in the browser). How can I stop this pagescroll (and maybe other standard-actions) from happening, i.e. my event should recognize the keydown, but not the browser?
I tried event.stopPropagation() and event.stopImmediatePropagation(), but somehow it doesn't work. Event when I add "keyup" and "keypress" to the mix (code below). Can you help me out?
Thanks,
Chris
- var typeToSearchFrame = $("<div></div>").css({
- "width":"98%",
- "height":"98%",
- "position":"absolute",
- "z-index":999,
- "left":"1%",
- "top":"1%",
- "-moz-border-radius":"10px",
- "background-color":"rgba(120, 120, 120, 0.8)",
- "display":"none"
- }).appendTo($("body"));
- var typeToSearchFrameSearchBox = $("<div></div>").css({
- "width":"92%",
- "margin-left":"1%",
- "margin-top":"1%",
- "padding":"1% 3%",
- "-moz-border-radius":"10px",
- "border":"1px solid black",
- "font-size":"26px"
- }).append($("<span></span>"));
- typeToSearchFrame.append(typeToSearchFrameSearchBox);
- $(document).keydown(function(event) {
- event.stopImmediatePropagation();
- if (typeToSearchFrame.css("display") == "none" && event.keyCode >= 48 &&
- event.keyCode <= 90) {
- typeToSearchFrame.slideDown("fast");
- typeToSearchFrameSearchBox.find("span").text(
- typeToSearchFrameSearchBox.find("span").text() +
- String.fromCharCode(event.keyCode));
- } else if (typeToSearchFrame.css("display") == "block") {
- if ((event.keyCode > 47 && event.keyCode < 90) || event.keyCode == 32) { // character
- typeToSearchFrameSearchBox.find("span").text(
- typeToSearchFrameSearchBox.find("span").text() +
- String.fromCharCode(event.keyCode));
- } else if (event.keyCode == 8) { // backspace
- typeToSearchFrameSearchBox.find("span").text(
- typeToSearchFrameSearchBox.find("span").text().substring(0,
- typeToSearchFrameSearchBox.find("span").text().length-1));
- } else if (event.keyCode == 27) { // escape
- typeToSearchFrameSearchBox.find("span").text("");
- typeToSearchFrame.slideUp("fast");
- }
- }
- }).keyup(function(event) {
- event.stopImmediatePropagation();
- }).keypress(function(event) {
- event.stopImmediatePropagation();
- });