CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uifirefox
thornate
thornate

Reputation: 5142

Firefox: JQuery-UI checkboxes not selected when pressing Shift or CTRL

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>

Upvotes: 2

Views: 443

Answers (1)

user1189882
user1189882

Reputation:

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.

Upvotes: 0

Related Questions