前几天遇到有人问想做一个修改和保存资料的效果 于是想了想 研究了下
想到了三种实现方式 当然用户体验有待研究。。由于刚开始写博客 语言组织和代码都比较差 欢迎大家指正
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>