javascript - 通过浏览器本机上下文菜单粘贴自定义 div

Question

我有一个<div>块，我希望用户能够通过浏览器本机上下文菜单粘贴数据。contenteditable="true"不是一个可接受的解决方案。Ace editor( http://ace.ajax.org/build/kitchen-sink.html ) 将<textarea>鼠标光标放在mousedown事件上。我试图做这样的事情：

<div class="container">
 <div id="editor"></div>
 <textarea id="paste-container"></textarea>
</div>

#container {
 position: relative;
}

#editor {
 width: 100px;
 height: 100px;
}

#paste-container {
 position: absolute;
 width: 100px;
 height: 100px;
 display: none;
 opacity: 0;
}

var editor = document.querySelector('#editor'),
    paste = document.querySelector('#paste-container');

editor.onmousedown = function () {
 paste.style.display = "block";
 setTimeout(function () {
  paste.style.display = "none";
 }, 0);
}

但我没有得到 textarea 的菜单。请告诉我，如何以这种方式获取用户的粘贴数据？

Answer 1

所以我找到了解决方案。您需要为事件设置<textarea>选择contextmenu。像这样的东西：

editor.onmousedown = function () {
 paste.style.display= 'block';
};

editor.onmouseup = function() {
 setTimeout(function () {
  paste.style.display = 'none';
 }, 0);
};

editor.oncontextmenu = function () {
 paste.setSelectionRange(0, 0);
};