Question

我有<p>个特定文本</p> 我想通过 onClick 将其更改为<input value="certain text">，这样就可以对其进行编辑。

我找到的所有解决方案都是单击一个按钮。我想要隐藏文本，而是显示输入字段。

Answer 1

将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 2

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 3

您只能使用输入元素。使用具有所选样式的禁用输入（例如，灰色背景）。使用onClick事件将输入设置为活动状态并更改其样式（无背景）。

为我工作得很好。

Answer 4

单击“编辑”，完成编辑后单击。

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

如何通过onclick将<div>更改为<input />

4 个答案: