JavaScript/pre2textarea のバックアップソース(No.2)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- 現在との差分 - Visual を表示
- バックアップ を表示
- JavaScript/pre2textarea へ行く。
- 1 (2012-07-24 (火) 18:09:17)
- 2 (2012-08-03 (金) 17:32:54)
- 3 (2012-08-05 (日) 01:03:49)
- 4 (2012-08-06 (月) 18:39:27)
- 5 (2012-08-28 (火) 15:38:17)
- 6 (2012-08-30 (木) 12:18:01)
- 7 (2012-08-30 (木) 14:49:01)
- 8 (2012-08-31 (金) 10:38:05)
- 9 (2012-09-10 (月) 17:00:10)
- 10 (2012-09-11 (火) 12:21:34)
- 11 (2012-09-11 (火) 15:29:41)
- 12 (2012-09-14 (金) 10:18:12)
- 13 (2012-09-19 (水) 12:20:24)
- 14 (2012-10-05 (金) 16:41:26)
- 15 (2013-04-23 (火) 14:54:19)
- 16 (2014-06-04 (水) 00:58:00)
- 17 (2014-09-04 (木) 01:35:22)
- 18 (2014-09-04 (木) 05:40:19)
- 19 (2014-09-26 (金) 19:15:27)
- 20 (2014-11-08 (土) 01:41:12)
- 21 (2014-11-19 (水) 19:37:34)
- 22 (2014-12-10 (水) 17:34:25)
- 23 (2015-04-14 (火) 17:22:27)
- 24 (2017-02-21 (火) 16:49:54)
- 25 (2017-04-13 (木) 12:02:17)
- 26 (2017-10-27 (金) 16:26:13)
- 27 (2019-03-12 (火) 18:16:47)
- 28 (2019-05-22 (水) 19:34:28)
- 29 (2021-11-18 (木) 12:46:32)
TITLE:JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする #navi(../) RIGHT:Posted by [[aterai]] at 2012-07-25 * JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする [#c270c144] #contents ** 概要 [#f8b8ce13] 以下、Opera 12.50で、Clipboard API を使い、preタグで囲まれたソースコードを簡単にコピーする方法のテスト。 - ユーザーJavaScriptフォルダにコピー - pre要素をダブルクリックすると、内容がtextareaに変換される - Clipboard API が使用できる Opera 12.50 の場合、コピー、カットすると元のpreに戻る ** ソースコード [#v391264a] #code{{ (function() { var listener = function(e) { var tx = document.createElement("textarea"), div = document.createElement("div"), closeListener = function(e) { switch(e.type) { case 'copy': case 'cut': var dataTransfer = e.clipboardData; dataTransfer.items.add(this.innerText, 'text/plain'); this.parentNode.replaceChild(this.originalPre, this); e.preventDefault(); break; } }; tx.style.width = parseInt(getComputedStyle(this,"").width).toString()+"px"; tx.style.height = "240px"; tx.originalPre = this; // ctrl-c 無しでコピーできるかもと思ったけど… // var event = new ClipboardEvent('copy', { bubbles: true, cancelable: true } ); // var dataTransfer = event.clipboardData; // dataTransfer.items.add("aaaaaaaaaaaaaaaaaaaaaaa", "text/plain"); // //this.parentNode.replaceChild(this.originalPre, this); // document.dispatchEvent(event); // //event.preventDefault(); tx.addEventListener("keydown", function(e) { if(e.keyCode=="27") { // ESC this.parentNode.replaceChild(this.originalPre, this); } }, false); tx.addEventListener("dblclick", function(e) { this.parentNode.replaceChild(this.originalPre, this); }, false); div.innerHTML = this.innerHTML.replace(/<br[ \/]*>/ig, "\n").replace(/<.*?>/mg, ""); tx.value = div.childNodes[0].nodeValue.replace(/\xA0/g, ' '); this.tx = tx; this.parentNode.replaceChild(this.tx, this); this.tx.focus(); this.tx.select(); tx.addEventListener('copy', closeListener, false); tx.addEventListener('cut', closeListener, false); }, pre = document.getElementsByTagName("pre"), i = 0, len = pre.length; for(; i<len; i++) { pre[i].addEventListener("dblclick", listener, false); } }()); }} ** Bookmarklet版 [#rfe513cb] - 名前 -- pre2textarea - アドレス javascript:(function(){var d=document.getElementsByTagName("pre"),b=0,a=d.length,c=function(g){var f=document.createElement("textarea"),h=document.createElement("div");f.style.width=parseInt(getComputedStyle(this,"").width).toString()+"px";f.style.height="240px";f.originalPre=this;f.addEventListener("keydown",function(i){if(i.keyCode=="27"){this.parentNode.replaceChild(this.originalPre,this)}},false);f.addEventListener("dblclick",function(i){this.parentNode.replaceChild(this.originalPre,this)},false);h.innerHTML=this.innerHTML.replace(/<br[ \/]*>/ig,"\n").replace(/<.*?>/mg,"");f.value=h.childNodes[0].nodeValue.replace(/\xA0/g," ");this.tx=f;this.parentNode.replaceChild(this.tx,this);this.tx.focus();this.tx.select()};for(;b<a;b++){d[b].addEventListener("dblclick",c,false)}}()); -- YUI Compressor で圧縮 ** 参考リンク [#led8cfb3] - http://sybian99.googlepages.com/preToTextarea.user.js - %%[http://d.hatena.ne.jp/Sybian/20070815/p2:title=preをtextareaに - Sybianの日記]%% -- %%via: [http://kawatarou.info/note/opera/opera_userjs.htm:title=Shishimushi - User JavaScript]%% - [http://d.hatena.ne.jp/aterai/20080725/1216954636 preタグで囲まれたソースコードを簡単にコピーする方法 - てんぷらメモ@はてな] - [http://www.w3.org/TR/clipboard-apis/ Clipboard API and events] - [http://my.opera.com/desktopteam/blog/2012/07/06/marlin-1250-swim Opera Desktop Team - First bite of 12.50 ‘Marlin’: Clipboard API, redesigned key event handling, -webkit- CSS, and Notification Center] - [http://domes.lingua.heliohost.org/webapi/intro-webplatform1.html#section-1-3 クリップボード API - Introduction to the Web Platform - DOM ECMAScripting] ** コメント [#vf0fac74] #comment