如何改变<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 事件将输入设置为活动并更改其样式（无背景）。

对我来说效果很好。