Context menu event not working on ie when spellcheck is on

Question

While attaching a contextmenu event to a content-editable div filled with spelling mistakes, IE(11) is ignoring the callback and showing its own Spell-check menu.

jsbin: http://jsbin.com/favit/3/ (You should preview it, then edit the div, and you will see the problem)

Turning off Spell-check is not an option, because i can't tell clients to do so.

Answer 1

I came across this question on Google and I figured I would post an answer in case anyone else Googles this. This is how to add your own context menu on IE without disabling spellcheck. It even works when you right-click on an incorrectly-spelled word with a red underline beneath it.

Basically, there are 2 steps:

1) In the mousedown event, you need to disable spellcheck on the contenteditable element.

2) Afterwards, you re-enable spellcheck on the contenteditable element.

Below is a working example.

var editable = $('#editable');

var mouseX, mouseY;

$(document).mousemove(function(event) {
        mouseX = event.pageX;
        mouseY = event.pageY;
    });


editable.mousedown(function(e) {
       if (e.button == 2) {
          editable.attr('spellcheck','false');
          e.preventDefault ? e.preventDefault : e.returnValue = false;
          e.stopPropagation();
          return false;
        }
        return true;
      });

editable.get(0).oncontextmenu = function(e) {
        e.preventDefault ? e.preventDefault : e.returnValue = false;
        return false;
    };

editable.on("contextmenu", function(e) {
  e.preventDefault ? e.preventDefault : e.returnValue = false;
  e.stopPropagation();
  
  if ($('#contextmenu').length == 0) {
            $('<div>').attr('id', 'contextmenu').appendTo('body');
            $('#contextmenu').css('z-index', 1000);
            $('#contextmenu').css('position', 'absolute');
            $('<ul>').appendTo('#contextmenu');
    
            $('<li>').html('some').appendTo('#contextmenu ul');
            $('<li>').html('text').appendTo('#contextmenu ul');
            $('<li>').html('here').appendTo('#contextmenu ul');


          }
  $('#contextmenu').css('top', mouseY);
  $('#contextmenu').css('left', mouseX);
  
  $('#contextmenu li').click(function() {
       $('#contextmenu').remove();
       editable.attr('spellcheck','true');

   });

  
});

#contextmenu {
  border: 1px solid #000;
  background-color: #fff;
  padding: 5px;
}

#contextmenu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#contextmenu li {
  cursor: pointer;
  padding: 2px;
}

#contextmenu li:hover {
  background-color: #2daade;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="editable" contenteditable="true">Click me and type some badly spelled words.</div>

Answer 2

Got it: Adding the attribute "spellcheck", setting its value to "false" has fixed it.

<div contenteditable="true" spellcheck="false">
    example notaword
</div>