Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink

    I’m working on a web application and would like to add keyboard shortcuts similar to GMail’s, but I’m having trouble finding any guides on how to do it. Prototype’s new docs seem to indicate that it can listen for keypresses with the <a href=“http://prototypejs.org/api/event”>Event class</a>, but how do I do this?

    Also, it only lists a few keypresses on that page, like KEY_BACKSPACE, etc. Where can I find what the names of other keys are?

    Obviously I’m more of a web designer than a developer, but I’m trying to learn! I’m also using <a href=“http://script.aculo.us/”>script.aculo.us</a> and <a href=“http://www.bennolan.com/behaviour/”>behaviour.js</a>, by the way.

    •  
      CommentAuthorJohnRiv
    • CommentTimeJan 23rd 2007
     permalink
  2.  permalink

    So @event.keyCode@ and @String.fromCharCode()@ will get me the key pressed, but how do I capture that event in the first place?

    I’ve been using @Event.observe()@ and behaviour.js’s event observation, but I only know how to listen for very specific actions on a specific element, like a @click@ on my anchor with @id=“load”@ or something. The article you referenced begins with the assumption that I’ve already captured the event, but I’m way dumber than that.

    •  
      CommentAuthorJohnRiv
    • CommentTimeJan 23rd 2007
     permalink
    ah sorry, here's how to capture the keydown event using prototype.js:


    Event.observe(window, 'load', function() {
    Event.observe(document, 'keypress', function(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);
    alert('Character was ' + character);
    });
    });


    that script will listen for keypress events after the page loads. you can then replace the alert() with whatever functionality you want
  3.  permalink

    Thanks, John, that’s exactly what I needed!

Add your comments
    Username Password
  • Format comments as (Help)