js點選使內容變成可編輯狀態
阿新 • • 發佈：2019-02-15
程式碼如下
<!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>
<!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>