テキストをクリックするとテキストエリアになるjQuery

かきかた帖

ADD0117
はてなでは、「その場編集」とよんでいるらしい。


  Edit In Place with AJAX Using jQuery Javascript Library by 15 Days Of jQueryをみながら
作ってみました。

実際に出来上がったもの、Edit in place Samples

index.php で保存して、同じディレクトリに、document.html(属性606位で、)　php5で、
php4ならfile_put_contentsを書き換えれば、いいです。

<?php

		
	if(isset($_POST['id']) and !empty($_POST['id']) 
	and isset($_POST['content']) and !empty($_POST['content'])){
	
		$content = strip_tags($_POST['content']);
		$content = htmlspecialchars($content);
		$content = nl2br($content);
		file_put_contents("document.html",$content);
		$save_document="";
	}else{
		$save_document=file_get_contents("document.html");
	}
	$id = "sample";
	
	
	
$result=<<<DOC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="divEdit_files/editinplace.css" rel="Stylesheet" type="text/css">
	<script src="/js/jquery.js" type="text/javascript"></script>

<script>
(function($){

	jQuery(function(){
		setClickable();
	});
	
	function setClickable(){
		
		jQuery('#editInPlace').click(function() {
										 
			var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
			var button   = '<p><input type="button" value="保存" class="saveButton" /> &nbsp; <input type="button" value="キャンセル" class="cancelButton" /></p></div>';
			var revert   = $(this).html();
			
			jQuery(this).after(textarea+button).remove();
			jQuery('.saveButton').click(function(){saveChanges(this, false);});
			jQuery('.cancelButton').click(function(){saveChanges(this, revert);});
		})
		.mouseover(function() {
			jQuery(this).addClass("editable");
		})
		.mouseout(function() {
			jQuery(this).removeClass("editable");
		});
	};
	
	function saveChanges(obj, cancel) {
	if(!cancel) {
		var t = jQuery(obj).parent().siblings(0).val();
		$.post("index.php",{
		  content: t,id: "$id"
		},function(txt){
		jQuery("#editInPlace").html(t);
                //jQuery("#editInPlace").load("document.html");
		});
	} else {
		var t = cancel;
	}
	
		if(t=='') t='(click to add text)';
			jQuery(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
			setClickable();
		}
})(jQuery);

</script>	
<style type="text/css">
	body{
		font-family: arial, helvetica, sans-serif;
		font-size: small;
	}
	
	.editable, textarea{
		background-color: #ccf;
		padding:1em;
		border:1px dashed #0099FF;
	}
	
	textarea{
		width: 95%;
		font-size: 100%;
	}
	
	img.progress{
		vertical-align: middle;
		padding: 0 10px;
	}
	.cancelButton{
		padding:3px 5px;
		background:#eed;
		border:1px solid #ccc;
	}
	.saveButton{
		padding:3px 5px;
		background:#eed;
		border:1px solid #ccc;
	}
</style>	
<title>Edit-in-Place with jQuery</title>	
</head>
<body>
<h1>Edit-in-Place with jQuery</h1>
<div class="" id="editInPlace">$save_document</div>
</body>
</html>
DOC;
echo $result;
exit;
?>