2

EDIT: From mark.hch's answer I realised this is only a problem on Firefox. To clarify what I wrote below: I'm not asking for help with the event handler - that was just context. I specifically need the checkbox buttons to work on Firefox when holding the shift and CTRL keys.

I have a series of JQuery-UI checkboxes with an event handler set up and working properly. I want to be able to change the behaviour when a checkbox is clicked while the shift/CTRL buttons are pressed. The thing is, nothing actually happens when I click the checkboxes while holding them.

It looks to me like the buttons are being selected/highlighted rather than clicked. How can I stop this and register the click when the shift key is pressed?

For example: https://jsfiddle.net/51c72b20/

  <script>
  $(function() {
    $( "#format" ).buttonset();
  });
  </script>


<div id="format">
  <input type="checkbox" id="check1"><label for="check1">Alpha</label>
  <input type="checkbox" id="check2"><label for="check2">Bravo</label>
  <input type="checkbox" id="check3"><label for="check3">Charlie</label>
</div>
thornate
  • 4,902
  • 9
  • 39
  • 43

1 Answers1

0

You can use the CSS properties to disable text-selection (see: How to disable text selection highlighting using CSS?).

Add this CSS to your #format element, like so:

#format{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Then add your shift press tracking:

var shiftDown = false;
$(document).on('keydown', function(e){
    if(e.which == 16 && !shiftDown){ shiftDown = true; }
});
$(document).on('keyup', function(e){
    if(e.which == 16 && shiftDown){ shiftDown = false; } 
});

And finally add your click method and determine if shift is being held:

$('#format label').on('click', function(){
    if(shiftDown){
        //$(this) was clicked while shift was down
    }
    else{
        //$(this) was clicked while shift was not down   
    }
});

Final result: https://jsfiddle.net/55wpdp4d/

NOTE: Final result acts strangely in Firefox, in that when you shift+click a button it doesn't behave normally... Will look into it, but no promises on resolution.

Community
  • 1
  • 1
  • Yeah, I pretty much had all you posted here implemented already. I'd tried the CSS but it didn't work, as you realised. It was the lack of clicking when shift is pressed that was my issue. I didn't realise it was a Firefox-only issue though, so thanks for pointing that out. – thornate Jun 24 '15 at 22:31