我在 Stack Overflow 中看到了很多答案,解释了我们如何通过监听keydown
事件并将焦点重定向到位于屏幕外的文本区域来删除文本粘贴的格式。此解决方案很好,但不解决使用上下文菜单或浏览器菜单进行粘贴的问题。
Google Plus 确实使用contenteditable
div 作为用户帖子的编辑器,即使使用上下文菜单,那里的粘贴也能正常工作。有谁知道他们是如何取得这个好成绩的?
我在 Stack Overflow 中看到了很多答案,解释了我们如何通过监听keydown
事件并将焦点重定向到位于屏幕外的文本区域来删除文本粘贴的格式。此解决方案很好,但不解决使用上下文菜单或浏览器菜单进行粘贴的问题。
Google Plus 确实使用contenteditable
div 作为用户帖子的编辑器,即使使用上下文菜单,那里的粘贴也能正常工作。有谁知道他们是如何取得这个好成绩的?
我做了一些测试,我认为我能够重现这种行为。我只使用 Google Chrome 和 Firefox 测试过这个解决方案,所以它可能在许多浏览器中都有问题。我怀疑 Google Plus 在不能使用这种技术时会优雅地降低用户体验。
为了实现这个功能,我在粘贴事件期间将焦点重定向到屏幕外的一个 div。div 收到粘贴内容,超时后,我得到了 div 的文本(使用 jquery 删除 html 标签)。示例代码:
var object = this;
this.$editable.on("paste", function(evt) {
object.saveCursorPosition();
var textarea= $("<div contenteditable></div>");
textarea.css("position", "absolute").css("left", "-1000px").css("top", object.$editable.offset().top + "px").attr("id","pasteHelper").appendTo("body");
textarea.html('<BR>');
textarea.focus();
setTimeout(function() {
object.$editable.focus();
object.restoreCursorPosition();
object.insertTextAtCursor(textarea.text());
textarea.remove();
}, 0);
});