类似于资料修改并且保存的操作

前几天遇到有人问想做一个修改和保存资料的效果于是想了想研究了下

想到了三种实现方式当然用户体验有待研究。。由于刚开始写博客语言组织和代码都比较差欢迎大家指正

1、类似于QQ的资料修改(本来就是input输入框先隐藏边框鼠标移动上去出现边框得到焦点时可以编辑失去焦点时保存)

如下图这个就不说啦太简单了

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>这里主要写思路 布局就没那么细啦</title>
<style type="text/css">
*{  font-size:30px;}
span{  vertical-align:middle}
input{ border:1px solid #FFF; solid line-height:12px;}
input:hover{border:1px solid #000;}
</style>
</head>
<body>
<span>请输入名称：</span><input value="星米"/>

</body>
</html>

2.文本在页面上保存时用文本标签包裹，当点击修改时在对于的文本后面插入input 并且把标签innerHTML赋给input的value

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>代码二</title>
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function edit(obj){
	obj=$(obj).parent().parent();
	obj.children('li:not(:last)').find("span").each(function(){
	var self=$(this);
	self.html('<input type="text" value="'+self.html()+'" class="ipt" />');
	});
	obj.children('li:last').html('<a href="#" onclick="save(this)">保存</a>');
	obj=null;
}
function save(obj){
	obj=$(obj).parent().parent();
	obj.children('li:not(:last)').find("span").each(function(){
	var self=$(this);
	self.html(self.children('input[class="ipt"]').val());
	});
	obj.children('li:last').html('<a href="#" onclick="edit(this)">更改</a>');
	obj=null;
}
</script>
</head>
<body>

<ul>
	<li><span>姓名</span><span>姓名</span><span>姓名</span></li>
	<li><span>AAAAAAAA</span><span>bbbbbbbb</span></li>
	<li><a href="#" onclick="edit(this)">更改</a></li>
</ul>

</body>
</html>

3、利用input的readyonly属性来控制为只读当点击修改时移除掉readyonly 属性

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>代码三</title>
<style type="text/css">
input{ float:left;}
p{ float:left;margin:5px; padding:0 5px; background:#555;cursor:pointer;}
p span{ display:block; 100%; height:100%}
</style>

</head>
<input id="setText" value="15647"/>
<p id="edit">修改</p>
<p id="save">保存</p>
<script>
setText.readOnly = true;
edit.onclick = function(){
	setText.readOnly = false;
	setText.focus();
}
var save = document.getElementById("save");
save.onclick = function(){
	setText.readOnly = true;
	setText.blur();
}
</script>
</body>
</html>