SQLの窓

2013年03月02日


jQuery : window.openでテキストエリアを開いてクリップボード用データを表示する

処理そのものは、jQuery である必要はあまりないのですが、イベントの処理が必要なので jQuery で書いています。インラインで全て書いてしまってもいいのですが、引用符がかなり複雑になって面倒なのでこれでいいと思います。

ちょっとした貼り付け用のサービスとして

どのような対象でも、クリックする事によってウインドウを開かせて、追加の情報としてテキストエリアの中に表示し、テキストエリアの中をクリックすると選択状態になります。

後は、ユーザーがコピーするかどうするかはご自由に・・・という処理です。


こんな感じでデータを表示




▼ こちらをクリックして下さい
<script type="text/javascript"> // この内容をテキストエリアに転送します // ※ クリックすると、選択されます </script>
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script>

$(function() {
	$("#target").append("window.openでテキストエリアを開いてクリップボード用データを表示する")
	 .css("cursor","pointer")
	 .click(function() {
		var doc = window.open(
			"about:blank",
			"",
			"width=600,height=100").document;
		doc.write("<textarea onclick=\"this.select();\" cols=70 rows=5>" );
		doc.write( $("#target .show_text").text() );
		doc.write("</textarea>");
		doc.close();
	});
});
</script>


<style type="text/css">
.show_text {
	display: none;
}
</style>

<span id="target"><span class="show_text">&lt;script type="text/javascript"&gt;
// この内容をテキストエリアに転送します
// ※ クリックすると、選択されます
&lt;/script&gt;
</span></span>


document.write() である理由

DOM で作成するのは、本来合理的ではありません。過去、ブラウザによって DOM の実装が違ったりバグだったりと、同じ処理でできるかもしれないのは、jQuery がある前提で、jQuery に問題が出ればかなり困った事になります。

まあそんな大げさでも無いですが、画面レイアウトを全て DOM で作成するのはやはり合理的では無いので、HTML レベルの文字列を用意して書き出すほうがリスクが少ないと思います。

とにかく、経験から言って document.write の動作は信頼性が高く、仕様から言っても PHP で条件によって違うページを作るのを、クライアントで行単位でやってるようなものです。



タグ:jquery javascript
【jQueryの最新記事】
posted by lightbox at 2013-03-02 10:00 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり