Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    the Netherlands
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Consume shift / ctrl if used on multiple select?

    I'm trying to do something like google suggest on the Danbooru API in GreaseMonkey
    I got the suggestions popping up part working fine for which I used an absolute positioned select multiple.

    Is there any way to consume the shift/ctrl keypress event so things like ctrl + click and shift + arrow down etc just select ONE choice?
    Removing the 'multiple' atrribute would do me no good as it changes the select to a combobox instead of a list.

    (I realize this could be done via other elements, but select multiple seems to good to pass on as it already does highlighting / has good keyboard accessibility and doesn't need any CSS for overflow-y etc)

    Well as it probably has to tie in with the on enter key I got so far I might as well post the code
    Code:
    var srch = document.createElement( 'input' );
      
    var tagList = document.createElement( 'select' );
    tagList.id = 'tagList';
    tagList.multiple = true;
    tagList.addEventListener( 'keypress', function( e ) { 
      if( e.which == 13 ) //If enter is pressed (selection is made)
      {
        //Well this is odd, no way to return multiple select values? workaround time..
        var str = '';
        for( var i = 0; i < e.target.options.length; i++ )
        {
          if( e.target.options[i].selected )
          {
            str += e.target.options[i].textContent; 
          }
        }
      }
      srch.value = str;
    }, false );
    EDIT:
    Well.. looks like I can consume the entire event with e.preventdefault. Not what I want though, any way to consume only the shift and or crtl key event while leaving other keys unharmed?
    Last edited by Axeia; 02-16-2009 at 07:34 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2009
    Location
    the Netherlands
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Workaround

    okay, looks I'll be going with a work around.. monitor all the key events on the window.
    If shift is pressed I've a way to detect it then.. and can handle accordingly.

    For those trying to archieve something similar, I recommend adding the following bit of code to your script so you can monitor what's going on:
    Code:
    var tstBox = document.createElement( 'pre' );
    tstBox.style.position = 'absolute';
    tstBox.style.top = 0;
    tstBox.style.backgroundColor = 'yellow';
    document.body.appendChild( tstBox );
    
    document.addEventListener( 'keydown', function( e ) { 
      tstBox.textContent = e.type+"\n";
      tstBox.textContent += e.which; 
    }, false );
    document.addEventListener( 'click', function( e ) { 
      tstBox.textContent += "\n"+e.type+"\n";
      tstBox.textContent += e.which; 
    }, false );
    document.addEventListener( 'keyup', function( e ) { 
      tstBox.textContent = '';
    }, false );

  • #3
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Um, you do not need to use multiple. You can set <select size="10"> to get it to show a bunch of options.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •