当前位置 博文首页 > qq_28339819的博客：js点击使内容变成可编辑状态
一个有内容的标签，用原生JS点击按钮使内容变成可编辑状态，然后使用保存数据。这个是点击编辑按钮使得标签内容替换为文本域来实现的。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
? ? <title>JS编辑内容</title>
</head>
<body>
? ? <div>
? ? ? ? <b>电脑：</b><span >小米笔记本电脑</span><button οnclick="edit(this)">编辑</button>
? ? </div>
? ? <div>
? ? ? ? <b>手机：</b><span>华为手机</span><button οnclick="edit(this)">编辑</button>
? ? </div>
<script>
? ? ? ? /*点击编辑即可要修改的内容*/
? ? ? ? function edit(element) {
? ? ? ? ? ? element.innerHTML="保存";
? ? ? ? ? ? var prev=element.previousSibling;
? ? ? ? ? ? var oldhtml=prev.innerHTML;
? ? ? ? ? ? prev.innerHTML="";
? ? ? ? ? ? var newObj=document.createElement("textarea");
? ? ? ? ? ? newObj.className="textArea";
? ? ? ? ? ? newObj.innerHTML=oldhtml;
? ? ? ? ? ? prev.appendChild(newObj);
? ? ? ? ? ? newObj.focus();
? ? ? ? ? ? newObj.οnblur=function(){
? ? ? ? ? ? ? ? alert(prev.id);
? ? ? ? ? ? ? ? element.innerHTML="编辑";
? ? ? ? ? ? ? ? prev.innerHTML=this.value?this.value:oldhtml;
? ? ? ? ? ? }
? ? ? ? }
? ??
</script>
</body>
</html>
