如何改變<div>進入<input>通過點擊

Question

我有<p>某個文本</p>我希望通過onClick將其更改為<input value="certain text"> ，以便可以對其進行編輯。

我找到的所有解決方案都是點擊一個按鈕。 我希望文本隱藏而輸入字段出現。

Answer 1

 function makeInput(e) { e.innerHTML = '<input value="'+e.innerText+'">'; }

 <p onclick="makeInput(this)">a certain value</p>

一種可能的替代方法是僅使 p 標簽的內容可編輯，並使用 javascript 提交信息而不使用輸入標簽。

 <p contenteditable="true">This is an editable paragraph.</p>

Answer 2

單擊以編輯，完成編輯后單擊離開。

HTML：

<div class="editable">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nullam dapibus porttitor sem, et tristique neque vehicula eu. 
   Nulla porta ex semper sapien luctus bibendum. Donec et congue nisi
</div>

CSS：

textarea {
  width: 100%;
  max-width: 400px;
  padding: 10px 20px;
  min-height: 120px
}

JS：

var eventHandler = function(e){e.preventDefault(); editDiv(this);};
document.querySelector('.editable').addEventListener("click", eventHandler);

function editDiv(div){
  var text = div.innerText,
      textarea = document.createElement("TEXTAREA");
  textarea.value = text;

  div.innerHTML = "";
  div.append(textarea);
    textarea.focus();
  textarea.addEventListener("focusout", function(e){
    finishEditDiv(div);
  });

  div.removeEventListener("click", eventHandler);

}

function finishEditDiv(div){
  //handle your data saving here
  var text = div.querySelector('textarea').value;
  div.innerHTML = text;
  document.querySelector('.editable').addEventListener("click", eventHandler);
}

Answer 3

將onClick分配給 p 標簽。

創建一個隱藏的輸入。

單擊隱藏當前 p，並獲取與該 p 關聯的輸入，然后顯示它。

 function onClick(e) { e.currentTarget.style.display = 'none'; document.querySelector('#p-input').style.display = 'block'; }

 <section> <p onClick="onClick(event)">Clickable text</p> <input id="p-input" style="display:none;" type="text" /> </section>

Answer 4

您只能使用 input 元素。 使用具有您選擇的樣式的禁用輸入（例如，灰色背景）。 使用 onClick 事件將輸入設置為活動並更改其樣式（無背景）。

對我來說效果很好。