onclick editable text field using javascript-CodePudding

Well, I am learning to create forms so I got this problem. I want a input field which will be simple text and when onclicking edit button it should be a input field.

.wrapper {
  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;
}

.input-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}

.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;
}

.input-box p {
  font-size: 16px;
  padding: 0 30px;
}

.btn {
  margin-right: auto;
}

<div >
  <div >
    <i ></i>
    <p>Umann</p>
    <button >Edit</button>
  </div>
  <!--onclicking edit i want input type to appear-->
  <div >
    <i ></i>
    <input type="text">
  </div>
</div>

(CodePen)

I tried contenteditable but I want in input form so that I can store the value in database.

CodePudding user response：

Here is a js example that toggles contenteditable on p when the .btn is clicked. I used CSS to add the respective outline on p when [contenteditable="true"]

function addRemoveText() {
  var contenteditable = document.getElementById('editText').contentEditable;
  if (contenteditable == 'inherit' || contenteditable == 'false') {
    document.getElementById('editText').contentEditable = true;
  } else {
    document.getElementById('editText').contentEditable = false;
  }
}

.wrapper {
  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;
}

.input-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}

.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;
}

.input-box p {
  font-size: 16px;
  margin: 0 30px;
  padding: 0 30px;
}

p#editText[contenteditable="true"] {
  outline: -webkit-focus-ring-color auto 1px;
}

.btn {
  margin-right: auto;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<div >
  <div >
    <i ></i>
    <p id="editText">Umann</p>
    <button  onclick="addRemoveText();">Edit</button>
  </div>
</div>

CodePudding user response：

document.querySelector(".btn").addEventListener("click", function() {
  const username = document.querySelector("p").innerText;
  document.querySelector("p").innerHTML = `<input type="text" value="${username}" />`;
})