ブログ

※Make Link ジェネレータを作ったのでそちらも参照してみてください。
Google Chrome で使う Make Link の代用ブックマークレットのジェネレータ

Google Chrome で使う Make Link の代用ブックマークレット vol.2 のブックマークレットを少し改良した。

以前から引き継いでいる処理内容や使い方を知りたい場合は参照のこと。

改良点

コピーのイベントを受け取るとコピー後に textarea のタグを消去する処理を追加。

これで、クリックと 『Ctrl + C』 と textarea 消去がほぼ同時に行えるのでストレスがまったくなくなった。クリックするだけでコピーできる感覚。

処理

処理内容は以下。

var ele = document.createElement("textarea");
ele.style.width = "100%";
ele.value ='<a href="'+window.location.href+'">'+document.title+'</a>';
document.body.insertBefore(ele,document.body.firstChild);
ele.focus();
ele.select();
ele.ondblclick = function(){ele.parentNode.removeChild(ele);
ele.oncopy = function(){
    setTimeout(function(){
        ele.parentNode.removeChild(ele);
    },
    1);return%20true;
};

【８行目】
コピーのイベントを受け取ると setTimeout() でイベントを生成し textarea のタグを消去。

その他の処理は下記を参照
Google Chrome で使う Make Link の代用ブックマークレット vol.2

ブックマークレット

Make Link
ドラッグ＆ドロップでブックマークのツールバーまで持っていけばOK。

javascript:(function(){var%20ele=document.createElement("textarea");ele.style.width="100%";ele.value='<a%20href="'+location.href+'">'+document.title+'</a>';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return%20true;}})()

おまけ

最初は下記の処理で試したが textarea がクリップボード格納前に消去さてしまうからかコピーできなかった。

ele.oncopy = ele.parentNode.removeChild(ele);return%20true;

oncopy のイベントが完了した後にイベントが発生しないか調べていると JavaScript : onBeforeCopy というのを見つけて、onAfterCopy みたいなのがないかと調べたけど見つけられなかった。

oncopy 内で完了イベントを生成して完了後に呼び出そうとか考えて、addEventListener を試してみたけど自分が想像していたのとなんか違ってた。（処理的には同じもの？）
※この時は setTimeout() を使うのがなんとなくいやだった。理由は特にあるかと聞かれるとない。気分的な問題。

ちなみに、このときに下記の処理を試してみると addEventListener → oncopy の順で呼び出されていた。

var ele = document.createElement("textarea");
ele.style.width = "100%";
ele.value ='<a href="'+window.location.href+'">'+document.title+'</a>';
document.body.insertBefore(ele,document.body.firstChild);
ele.focus();
ele.select();
ele.ondblclick = function(){ele.parentNode.removeChild(ele);
ele.oncopy = function(){alert("oncopy");return%20true;};
ele.addEventListener('copy',function(){
    alert("addEventListener");return%20true;
},true);

addEventListener 実験

最終的に setTimeout() に落ち着く。前述の【処理】へ。

参照

今回の処理とは関係ないものも含まれているが参考にしたもの。

javascriptのaddEventListener関数について – Yahoo!知恵袋
DOM:element.oncopy、oncut、onpaste を翻訳 – A Better Project＠はてなダイアリー
Javascriptでイベントハンドラのコールバック関数に引数を渡す – yummy-yummy
イヌでもわかるJavaScript講座
setTimeout/JavaScriptリファレンス
404 Blog Not Found:javascript – ページはいつ再描画されるか