Firefox Annoyance (keyboard event)

[Jezternz]

I came across a very interesting problem recently. Basicly I am building an editor and I want to take advantage of hot keys. I got it working perfectly in Internet Explorer, But I hit problems when I tried in Firefox, stranger still I found Chrome worked fine.

The problem is the use of hotkeys that are already used in firefox. In my example I have used Ctrl-S (Save page in both FF and Ch). Now I would think evt.preventDefault(); would be the answer, unfortunately this does not work in ff (does in chrome though?).

I have later found, It will work but only when its a <input> or other form control with the event handler. I think this is a bit sad, anyway around it?

    var keydownfunc = function(e){
        if(!e)e=window.event;
 
        if(window.event){e.returnValue = false;e.cancelBubble = true;}
        else {e.preventDefault();e.stopPropagation();}    
 
        if(e.ctrlKey && e.keyCode == 83)
            alert('Save Doc now');
        document.focus();
    }
 
    window.addEventListener?
     document.addEventListener('keydown',keydownfunc,false)
      :document.attachEvent('onkeydown',keydownfunc);
 

Also note straight away I thought of google docs, soon found out the problem actually occurs in google doc's just the same.

Thanks. Josh

[Jezternz]

I was looking at some other onkeydown event things, and I found that on quirksmode, the test app that was made, did supress the Ctrl-S. So I looked into the code and all I had to do from the start was simply return false in the handler :(

source: JavaScript - Detecting keystrokes

Im quite relieved actually, thought IE had an upper there for a while, dont understand why google docs does not use this though :S

Anyway, thanks for any time anyone put in, Josh

[xNephilimx]

Use jquey, it will save you an incredible ammount of time.
jQuery: The Write Less, Do More, JavaScript Library

[gits]

you could even use another JS-framework of course ... but to understand what those frameworks do for you and for what they are good for ... you should have such problems as you had ;) ... and know the solutions. to use a framework like jQuery, dojo, qooxdoo or whatever ... you should really need some more research regarding the things you really need or that you expect that you will need ... i'm not saying that jQuery is a bad recommendation but there are a lot of frameworks out there that might fullfill some different needs ...

kind regards

[Jezternz]

I am working on an editor, and it will likely turn out to be alot of script. So I am not sure if I want to run more script with a framework? Would a framework like Jquery add much loadtime / download time?

[xNephilimx]

@Jezternz
Not at all, jQuery is a really lightweight javascript framework, you can download it packed, so it's really compressed, too. Frameworks like prototype + scriptaculous are kind of heavier, but nothing to worry about. you see, the vast majority of the sites use some javascript framework, and it really doesn't slow them down.
I use jQuery, because to me, is the smallest one, faster to learn, really flexible, and extensible.

[gits]

you may have a look here for a quick comparison of different frameworks ...

kind regards

[Jezternz]

After looking into jQuery it looks truely amazing. I have a couple of questions about it though.
First what is the license like? Can you use your code (with the framework) commercially?
Secondly, just how efficient is it? will this add loading times or delays to your average user?
Thirdly, is it a good idea to commit to the JQuery framework, ie, will they be around for a while longer? are they reliable? (opinion off course)

[xNephilimx]

@Jezternz
Take a look at the link gits posted, great resource to compare js frameworks.

- jQuery can be used commercially, there's no problem about it. http://docs.jquery.com/Licensing

It's the lightest js framework available.

They are truly reliable, his foundator (John Resig) is currently working with mozilla org, developing the upcoming js specification and working on the engine too.