js点击使内容变成可编辑状态

最新推荐文章于 2025-07-11 09:11:51 发布

最新推荐文章于 2025-07-11 09:11:51 发布 · 1.2w 阅读

文章标签：

#dom #javascript #输入框文本可编辑

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript实现网页元素内容编辑的方法。通过点击编辑按钮，指定的文本将被替换为可编辑的文本域，允许用户直接修改内容，并在完成编辑后保存更改。

一个有内容的标签，用原生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 onclick="edit(this)">编辑</button>
</div>
<div>
<b>手机：</b><span>华为手机</span><button onclick="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.onblur=function(){
alert(prev.id);
element.innerHTML="编辑";
prev.innerHTML=this.value?this.value:oldhtml;
}
}

</script>

</body>
</html>