源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>按钮控制输入框编辑状态</title>
<style>
* {
float: left;
}
#begin_input {
height: 20px;
width: 200px;
border: 1px solid black;
}
#save_input {
position: absolute;
height: 20px;
width: 200px;
border: 1px solid black;
}
#edit_input {
position: absolute;
height: 20px;
width: 200px;
border: 1px solid black;
}
#edit {
position: relative;
top: 15px;
left: 20px;
}
#save {
position: relative;
top: 15px;
left: 40px;
}
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
</style>
</head>
<body>
<div id="input_box">
<p id="begin_input"></p>
<p id="edit_input" contenteditable="true"></p>
<p id="save_input" contenteditable="false"></p>
<div id="edit">edit</div>
<div id="save">save</div>
</div>
<script>
var edit = document.getElementById("edit");
var begin_input = document.getElementById("begin_input");
var edit_input = document.getElementById("edit_input");
var save_input = document.getElementById("save_input");
edit.onclick = function () {
console.log("edit");
begin_input.setAttribute('class', 'hide');
edit_input.setAttribute('class', 'show');
save_input.setAttribute('class', 'hide');
}
var save = document.getElementById("save");
save.onclick = function () {
console.log("save");
begin_input.setAttribute('class', 'hide');
edit_input.setAttribute('class', 'hide');
save_input.setAttribute('class', 'show');
}
</script>
</body>
</html>
Demo地址：http://129.204.144.144/Demo/按钮控制输入框编辑状态.html