Question

基本上我有一个元素demonstrated here：

<!DOCTYPE html>
<html>
<body>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

</body>
</html>

用户可以将数据粘贴到该字段中，从而更改

标记之间的内容。这样做的原因是获取使用简单<textarea>元素丢失的元数据（如超链接等）。

如果用户更改了内容，如何将此数据复制到<input type=hidden>元素中？

此问题与this question不同，其中没有数据输出（显示静态文本，不表示如何访问用户输入的实际数据），输入是不同的输入（<div> vs. <p>）

Answer 1

<强> HTML：

<p id="input" contenteditable="true" onKeyup="myFunction()">This is a paragraph. It is editable. Try to change this text.</p>

<input type="text" id="output">

<强>使用Javascript：

function myFunction() {
    document.getElementById("output").value = document.getElementById("input").innerHTML;
}

JSfiddle： here

Answer 2

您可以将input event与innerHTML合并以获取数据：

document.querySelector("p").addEventListener("input", function(e) {
   document.querySelector("input[type=hidden]").value = e.target.innerHTML;
});

Working Example

当用户通过按键或复制/粘贴更改p的内容时，这将更新隐藏的输入。

Answer 3

只需添加一个获取文本的侦听器并将其放在其他位置：

var get = document.getElementById('getcontenthere');
var put = document.getElementById('putcontenthere');

var updateInput = function() {
  put.value = get.innerText;
}

get.oninput = updateInput;

updateInput();

<!DOCTYPE html>
<html>

<body>

  <p id="getcontenthere" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

  <p>This is type=text so you can see it, but it could be hidden as well</p>
  <input id="putcontenthere" type="text">

</body>

</html>

Answer 4

您可以使用jQuery .html()方法获取p标记的内容

 <p id="my-contenteditable-p" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
 <input type="hidden" id="hidden-in"/>

像

  var content = $('#my-contenteditable-p').html();

并在检查用户是否更改了内容后，您可以使用jQuery .val()方法将值设置为隐藏字段。

$("#hidden-in").val(content);

Javascript：如何将内容从<p>元素复制到隐藏的<input />元素？

4 个答案: