2

keydownイベントをリッスンし、画面外に配置されたテキスト領域にフォーカスをリダイレクトすることで、テキストの貼り付けの書式設定を削除する方法を説明する Stack Overflow で多くの回答を見てきました。この解決策は優れていますが、コンテキスト メニューまたはブラウザー メニューを使用した貼り付けの問題には取り組まないでください。

Google Plus はcontenteditableユーザー投稿のエディターとして div を使用し、そこへの貼り付けはコンテキスト メニューでも適切に機能します。彼らがどのようにしてこの良い結果を達成したか、誰か知っている人はいますか?

4

1 に答える 1

1

いくつかのテストを行い、動作を再現できたと思います。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);


});
于 2012-06-16T14:21:12.367 に答える