将输入表单中的文本叠加在图像之上

Question

我希望我在输入中写的文本显示在 "engrave-image" div 中。出于某种原因，我无法让它工作。感谢您的帮助。

function annotate(obj) {
  var typed = document.getElementById(obj).value;
  document.getElementById("engrave-image").innerHTML = typed;
}

<input id="engrave-text" maxlength="15" onkeyup="count_up(this)" onkeyup="annotate(this);">
<div id="engrave-image"></div>

Answer 1

您可以直接使用 obj 来引用调用 onkeyup 事件的输入。传入的 obj 是对元素（在本例中为输入元素）的引用，而不是 id，因此在这里使用 document.getElementById(obj); 没有意义。

另外，您应该在输入的 id 属性周围加上引号。

function annotate(obj) {
  var typed = obj.value;
  document.getElementById("engrave-image").innerHTML = typed;
}

<input id="engrave-text" maxlength="15" onkeyup="annotate(this);">
<div id="engrave-image"></div>

Superimposing the text from input form on top of an image