使段落的一部分可编辑

Question

我正在制作一首互动诗，我的空白空间可用正确的单词填写。任何人都可以告诉我如何使这些空间可编辑而不是诗的其余部分吗？

这首诗是：

<pre id="poem">
<b><u>Social Media</b></u>

Relax yourself,
As I ______
through your mind
Scroll down the pages
of your spine
Reading every word 
and thought on
your ____ like a ____
Stumbled Upon 
you then _______ onto
your looks--IGuess
I'm ______ into you
You're my one
and only ________

Will you ______ me?

</pre>

Answer 1

您可以使用<span> contenteditable元素围绕可编辑区域：

＆＃13;

＆＃13;

function isValid()
{
  if (document.getElementById('poem-word1').innerText == 'test') {
    alert("valid");
  } else {
    alert("not valid");
  }
}

＆＃13;

<pre id="poem">
<b><u>Social Media</b></u>
Relax yourself,
As I <span contenteditable id="poem-word1">______</span>
through your mind
Scroll down the pages
of your spine
Reading every word 
and thought on
your <span contenteditable>____</span> like a <span contenteditable>____</span>
Stumbled Upon 
you then <span contenteditable>_______</span> onto
your looks--IGuess
I'm <span contenteditable>______</span> into you
You're my one
and only <span contenteditable>________</span>

Will you <span contenteditable>______</span> me?
</pre>
<button onclick="isValid()">Validate</button>

＆＃13;

＆＃13;

＆＃13;

注意：如果您需要提交这些值，则应使用带有<form>元素的<input>。