Question

在将一个contextmenu事件附加到一个充满拼写错误的内容可编辑div时，IE（11）忽略了回调并显示了自己的拼写检查菜单。

jsbin: http://jsbin.com/favit/3/（你应该预览它，然后编辑div，你会看到问题）

关闭拼写检查不是一种选择，因为我不能告诉客户这样做。

Answer 1

我在谷歌上遇到过这个问题，我想我会发一个答案以防其他人谷歌这个。这是如何在IE 上添加您自己的上下文菜单，而不用禁用拼写检查。当您右键单击拼写错误的单词并在其下方带有红色下划线时，它甚至可以正常工作。

基本上，有两个步骤：

1）在mousedown事件中，您需要在contenteditable元素上禁用拼写检查。

2）然后，您在contenteditable元素上重新启用拼写检查。

以下是一个工作示例。

＆＃13;

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');

   });

  
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

知道了：添加属性“spellcheck”，将其值设置为“false”已修复它。

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

上下文菜单事件无效，即拼写检查开启时

2 个答案: