Loading ...
Sorry, an error occurred while loading the content.
 

KeyListener problems

Expand Messages
  • itsallaboutyui
    I have an object containing the following code var kl2 = new YAHOO.util.KeyListener(document, { keys:[74,175,170,171,172,174,176] }, {
    Message 1 of 7 , Dec 29, 2006
      I have an object containing the following code

      var kl2 = new YAHOO.util.KeyListener(document, {
      keys:[74,175,170,171,172,174,176] },
      {
      fn:this.kp},correctScope:true } );
      kl2.enable();

      //this.kp is a function within the object which calls
      kp : function(e){

      YAHOO.log('pressed: ' + $E.getCharCode(e));
      }




      but the charCode is always 0. I'm stumped. 74 is a keypress for J.
    • Steven Peterson
      In your function, e does not represent an event, so using the Event utility against it will not work. KeyListener uses a CustomEvent, so the arguments are
      Message 2 of 7 , Dec 29, 2006

        In your function, e does not represent an event, so using the Event utility against it will not work. KeyListener uses a CustomEvent, so the arguments are (type, args, obj), so you should look in the args array to get both the DOM event (the first arg) and the code for the key that was pressed (the second arg). When you pass your handler to the KeyListener, it is subscribed to the internal “keyEvent” CustomEvent, and all of the abstract differences between keyCode and charCode are handled under the hood.

         

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

         

         

         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of itsallaboutyui
        Sent: Friday, December 29, 2006 3:36 PM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] KeyListener problems

         

        I have an object containing the following code

        var kl2 = new YAHOO.util.KeyListener(document, {
        keys:[74,175,170,171,172,174,176] },
        {
        fn:this.kp},correctScope:true } );
        kl2.enable();

        //this.kp is a function within the object which calls
        kp : function(e){

        YAHOO.log('pressed: ' + $E.getCharCode(e));
        }

        but the charCode is always 0. I'm stumped. 74 is a keypress for J.

      • randomjuju
        Hi there! This may belong in another thread, but I was wondering why KeyListener is part of the Container collection. It seems to me that it d be handy in
        Message 3 of 7 , Dec 29, 2006
          Hi there!

          This may belong in another thread, but I was wondering why KeyListener
          is part of the Container collection. It seems to me that it'd be
          handy in lots of other situations, too.

          Thanks!

          -Jon

          --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
          <y_stevenp@...> wrote:
          >
          > In your function, e does not represent an event, so using the Event
          utility
          > against it will not work. KeyListener uses a CustomEvent, so the
          arguments
          > are (type, args, obj), so you should look in the args array to get
          both the
          > DOM event (the first arg) and the code for the key that was pressed (the
          > second arg). When you pass your handler to the KeyListener, it is
          subscribed
          > to the internal "keyEvent" CustomEvent, and all of the abstract
          differences
          > between keyCode and charCode are handled under the hood.
          >
          >
          >
          > Steven Peterson
          >
          > Web Developer, Platform Engineering
          >
          > Yahoo!
          >
          >
          >
          >
          >
          >
          >
          > From: ydn-javascript@yahoogroups.com
          [mailto:ydn-javascript@yahoogroups.com]
          > On Behalf Of itsallaboutyui
          > Sent: Friday, December 29, 2006 3:36 PM
          > To: ydn-javascript@yahoogroups.com
          > Subject: [ydn-javascript] KeyListener problems
          >
          >
          >
          > I have an object containing the following code
          >
          > var kl2 = new YAHOO.util.KeyListener(document, {
          > keys:[74,175,170,171,172,174,176] },
          > {
          > fn:this.kp},correctScope:true } );
          > kl2.enable();
          >
          > //this.kp is a function within the object which calls
          > kp : function(e){
          >
          > YAHOO.log('pressed: ' + $E.getCharCode(e));
          > }
          >
          > but the charCode is always 0. I'm stumped. 74 is a keypress for J.
          >
        • itsallaboutyui
          Thanks for the quick response. I will test your solution tomorrow! I was confused in part by the fact that the slider uses code such as handleKeyPress:
          Message 4 of 7 , Dec 29, 2006
            Thanks for the quick response. I will test your solution tomorrow!

            I was confused in part by the fact that the slider uses code such as

            handleKeyPress: function(e) {
            if (this.enableKeys) {
            var Event = YAHOO.util.Event;
            var kc = Event.getCharCode(e);
            switch (kc) {
            case 0x25: // left
            case 0x26: // up
            case 0x27: // right
            case 0x28: // down
            case 0x24: // home
            case 0x23: // end
            Event.preventDefault(e);
            break;
            default:
            }
            }
            },

            - but now I understand the difference between that code and mine.
            Thanks again.
          • itsallaboutyui
            Should we be using the method used by Slider to catch keypresses, and saving KeyListener only for containers? ... KeyListener ... Event ... pressed (the
            Message 5 of 7 , Dec 30, 2006
              Should we be using the method used by Slider to catch keypresses, and
              saving KeyListener only for containers?

              --- In ydn-javascript@yahoogroups.com,
              "randomjuju" <jon.chambers@...> wrote:
              >
              > Hi there!
              >
              > This may belong in another thread, but I was wondering why
              KeyListener
              > is part of the Container collection. It seems to me that it'd be
              > handy in lots of other situations, too.
              >
              > Thanks!
              >
              > -Jon
              >
              > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
              > <y_stevenp@> wrote:
              > >
              > > In your function, e does not represent an event, so using the
              Event
              > utility
              > > against it will not work. KeyListener uses a CustomEvent, so the
              > arguments
              > > are (type, args, obj), so you should look in the args array to get
              > both the
              > > DOM event (the first arg) and the code for the key that was
              pressed (the
              > > second arg). When you pass your handler to the KeyListener, it is
              > subscribed
              > > to the internal "keyEvent" CustomEvent, and all of the abstract
              > differences
              > > between keyCode and charCode are handled under the hood.
              > >
              > >
              > >
              > > Steven Peterson
              > >
              > > Web Developer, Platform Engineering
              > >
              > > Yahoo!
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > > From: ydn-javascript@yahoogroups.com
              > [mailto:ydn-javascript@yahoogroups.com]
              > > On Behalf Of itsallaboutyui
              > > Sent: Friday, December 29, 2006 3:36 PM
              > > To: ydn-javascript@yahoogroups.com
              > > Subject: [ydn-javascript] KeyListener problems
              > >
              > >
              > >
              > > I have an object containing the following code
              > >
              > > var kl2 = new YAHOO.util.KeyListener(document, {
              > > keys:[74,175,170,171,172,174,176] },
              > > {
              > > fn:this.kp},correctScope:true } );
              > > kl2.enable();
              > >
              > > //this.kp is a function within the object which calls
              > > kp : function(e){
              > >
              > > YAHOO.log('pressed: ' + $E.getCharCode(e));
              > > }
              > >
              > > but the charCode is always 0. I'm stumped. 74 is a keypress for J.
              > >
              >
            • Eric Miraglia
              Jon, Valid question. KeyListener was developed as part of the Container package to serve specific needs related to Container-family controls -- like
              Message 6 of 7 , Dec 30, 2006
                Jon,

                Valid question.  KeyListener was developed as part of the Container package to serve specific needs related to Container-family controls -- like dismissing Panels or Dialogs using the <escape> key.  For an example of this type of implementation, go to http://developer.yahoo.com/yui/menu/ and click on the Release Notes link; the release notes for the Menu Control pop up in a Panel, but they can be dismissed with a <escape> — much more accessible (and easier on the hands) than aiming a mouse at the tiny close button.

                The Menu Control itself, which was built upon Container as a foundation, leverages KeyListener extensively and is one of the most keyboard-accessible DHTML controls in YUI.  Check out any of the Menu examples, navigating and selecting with your keyboard, to get a sense for the work Todd Kloots did on that part of the control.

                At the end of the day, your underlying point is still a good one — right now you need to include the Container Core package to use KeyListener, which isn't the most intuitive arrangement.  As you say, it does have utility for non-Container implementations.  That's something we're looking at as we go forward.

                Regards,
                Eric

                ______________________________________________
                Eric Miraglia
                Yahoo! User Interface Library



                On Dec 29, 2006, at 4:37 PM, randomjuju wrote:

                Hi there!

                This may belong in another thread, but I was wondering why KeyListener
                is part of the Container collection. It seems to me that it'd be
                handy in lots of other situations, too.

                Thanks!

                -Jon

                --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                <y_stevenp@...> wrote:
                >
                > In your function, e does not represent an event, so using the Event
                utility
                > against it will not work. KeyListener uses a CustomEvent, so the
                arguments
                > are (type, args, obj), so you should look in the args array to get
                both the
                > DOM event (the first arg) and the code for the key that was pressed (the
                > second arg). When you pass your handler to the KeyListener, it is
                subscribed
                > to the internal "keyEvent" CustomEvent, and all of the abstract
                differences
                > between keyCode and charCode are handled under the hood.
                >
                >
                >
                > Steven Peterson
                >
                > Web Developer, Platform Engineering
                >
                > Yahoo!
                >
                >
                >
                >
                >
                >
                >
                > From: ydn-javascript@yahoogroups.com
                [mailto:ydn-javascript@yahoogroups.com]
                > On Behalf Of itsallaboutyui
                > Sent: Friday, December 29, 2006 3:36 PM
                > To: ydn-javascript@yahoogroups.com
                > Subject: [ydn-javascript] KeyListener problems
                >
                >
                >
                > I have an object containing the following code
                >
                > var kl2 = new YAHOO.util.KeyListener(document, {
                > keys:[74,175,170,171,172,174,176] },
                > {
                > fn:this.kp},correctScope:true } );
                > kl2.enable();
                >
                > //this.kp is a function within the object which calls
                > kp : function(e){
                >
                > YAHOO.log('pressed: ' + $E.getCharCode(e));
                > }
                >
                > but the charCode is always 0. I'm stumped. 74 is a keypress for J.
                >


              • randomjuju
                Fair enough. I just read through the source for the KeyListener class, and it doesn t seem to me that it s dependent upon anything in the Container package.
                Message 7 of 7 , Dec 30, 2006
                  Fair enough.

                  I just read through the source for the KeyListener class, and it
                  doesn't seem to me that it's dependent upon anything in the Container
                  package. Please count this as my vote for moving the KeyListener
                  class from the Container package to the Event package.

                  Thanks again!

                  -Jon

                  --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
                  >
                  > Jon,
                  >
                  > Valid question. KeyListener was developed as part of the Container
                  > package to serve specific needs related to Container-family controls
                  > -- like dismissing Panels or Dialogs using the <escape> key. For an
                  > example of this type of implementation, go to http://
                  > developer.yahoo.com/yui/menu/ and click on the Release Notes link;
                  > the release notes for the Menu Control pop up in a Panel, but they
                  > can be dismissed with a <escape> — much more accessible (and easier
                  > on the hands) than aiming a mouse at the tiny close button.
                  >
                  > The Menu Control itself, which was built upon Container as a
                  > foundation, leverages KeyListener extensively and is one of the most
                  > keyboard-accessible DHTML controls in YUI. Check out any of the Menu
                  > examples, navigating and selecting with your keyboard, to get a sense
                  > for the work Todd Kloots did on that part of the control.
                  >
                  > At the end of the day, your underlying point is still a good one —
                  > right now you need to include the Container Core package to use
                  > KeyListener, which isn't the most intuitive arrangement. As you say,
                  > it does have utility for non-Container implementations. That's
                  > something we're looking at as we go forward.
                  >
                  > Regards,
                  > Eric
                  >
                  > ______________________________________________
                  > Eric Miraglia
                  > Yahoo! User Interface Library
                  >
                  >
                  >
                  > On Dec 29, 2006, at 4:37 PM, randomjuju wrote:
                  >
                  > > Hi there!
                  > >
                  > > This may belong in another thread, but I was wondering why KeyListener
                  > > is part of the Container collection. It seems to me that it'd be
                  > > handy in lots of other situations, too.
                  > >
                  > > Thanks!
                  > >
                  > > -Jon
                  > >
                  > > --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                  > > <y_stevenp@> wrote:
                  > > >
                  > > > In your function, e does not represent an event, so using the Event
                  > > utility
                  > > > against it will not work. KeyListener uses a CustomEvent, so the
                  > > arguments
                  > > > are (type, args, obj), so you should look in the args array to get
                  > > both the
                  > > > DOM event (the first arg) and the code for the key that was
                  > > pressed (the
                  > > > second arg). When you pass your handler to the KeyListener, it is
                  > > subscribed
                  > > > to the internal "keyEvent" CustomEvent, and all of the abstract
                  > > differences
                  > > > between keyCode and charCode are handled under the hood.
                  > > >
                  > > >
                  > > >
                  > > > Steven Peterson
                  > > >
                  > > > Web Developer, Platform Engineering
                  > > >
                  > > > Yahoo!
                  > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > >
                  > > > From: ydn-javascript@yahoogroups.com
                  > > [mailto:ydn-javascript@yahoogroups.com]
                  > > > On Behalf Of itsallaboutyui
                  > > > Sent: Friday, December 29, 2006 3:36 PM
                  > > > To: ydn-javascript@yahoogroups.com
                  > > > Subject: [ydn-javascript] KeyListener problems
                  > > >
                  > > >
                  > > >
                  > > > I have an object containing the following code
                  > > >
                  > > > var kl2 = new YAHOO.util.KeyListener(document, {
                  > > > keys:[74,175,170,171,172,174,176] },
                  > > > {
                  > > > fn:this.kp},correctScope:true } );
                  > > > kl2.enable();
                  > > >
                  > > > //this.kp is a function within the object which calls
                  > > > kp : function(e){
                  > > >
                  > > > YAHOO.log('pressed: ' + $E.getCharCode(e));
                  > > > }
                  > > >
                  > > > but the charCode is always 0. I'm stumped. 74 is a keypress for J.
                  > > >
                  > >
                  > >
                  > >
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.