onclick可编辑的文本字段使用javascript

Question

嗯，我正在学习创建表单，所以我得到了这个问题。我想要一个输入字段，这将是简单的文本，当点击编辑按钮，它应该是一个输入字段。我的工作链接(https://codepen.io/TA0011/pen/XWBdbyW)。

.wrapper-user{
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row{
display: flex;
margin:  32px 0;
}
form .form-row  .input-box{
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button{
margin-left:auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding:5px 10px;
cursor: pointer;
transition:  all 0.4s ease;
border: none;
outline: none; 
}
.form-row .input-box input{
height: 100%;
width: 100%;
outline: none;
border:  none;
padding:  0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition:  all 0.3s ease;
}
.form-row .input-box p{
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" value="Umann">
</div><button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" Value="[e-mail]">
</div>

<button class="btn">Edit</button>
</div><!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>

<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>[e-mail]</p>

</div>
<button class="btn">Edit</button>
</div><!--form-row-->

</form>
</div>

也是我的查询是，如果我们可以写，但它应该显示为

。在点击编辑按钮时，它应该变成可编辑的文本域。

我尝试了contentitable，但我想在输入形式中，以便我可以将值存储在数据库中。

Answer 1

我将为您提供一个小解决方案(仅针对输入字段)。

1-设置具有readonly属性和唯一的id的输入字段

2-将数据编辑属性设置为button，与要设置为可编辑的输入字段的id相同

2.1 -记得设置type="button"以防止表单提交

3-使用js获取所有buttons与btn类和循环集合

4-为每个button添加一个listener

5-获取被点击的button的data-edit属性以选择相对输入

6-setreadonlyfalse

更新:当您单击编辑按钮时，属性readonly被切换并失去焦点

const buttons = document.querySelectorAll('.btn');
buttons.forEach(item => {
item.addEventListener('click', function(el) {
let idInputAttibute = "#" + item.getAttribute('data-edit');
let inputField = document.querySelector(idInputAttibute);
inputField.readOnly ? (inputField.readOnly = false,inputField.focus()) :
inputField.readOnly = true

;
});
})

.wrapper-user {
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row {
display: flex;
margin: 32px 0;
}
form .form-row .input-box {
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button {
margin-left: auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
transition: all 0.4s ease;
border: none;
outline: none;
}
.form-row .input-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.form-row .input-box p {
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input id="name" type="text" value="Umann" readonly>
</div><button class="btn" type="button" data-edit="name">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" id="email" value="[e-mail]"  readonly>
</div>
<button class="btn" data-edit="email" type="button">Edit</button>
</div>
<!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>
<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>[e-mail]</p>
</div>
<button class="btn">Edit</button>
</div>
<!--form-row-->
</form>
</div>