本文介绍了一种基于JavaScript的内容编辑器交互设计，通过点击“修改”按钮，可以切换文本显示和编辑状态，实现动态文本输入功能。此设计适用于各种在线编辑场景，如博客编辑、评论编辑等。
<span id="it1">内容</span> <a href="javascript:;" id="a1" onclick="cg(this)">修改</a>
<span id="it2">内容</span> <a href="javascript:;" id="a2" onclick="cg(this)">修改</a>
<span id="it3">内容</span> <a href="javascript:;" id="a3" onclick="cg(this)">修改</a>
<span id="it4">内容</span> <a href="javascript:;" id="a4" onclick="cg(this)">修改</a>
<span id="it5">内容</span> <a href="javascript:;" id="a5" onclick="cg(this)">修改</a>
<script>
cg = function (obj) {
var o = document.getElementById("it" + obj.id.toString().substr(1));
if (o.childNodes[0].value) {
o.innerHTML = o.childNodes[0].value;
} else {
o.innerHTML = "<input type='text' value='" + document.getElementById("it" + obj.id.toString().substr(
1)).innerHTML + "' />";
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
