Question

我的HTML中有某些文本元素。我需要将单击的文本元素移动到某个输入文本框中。 The problem is described in the image

页面上有一些文本（在特定的区域内），当我单击该文本时，它应该在输入框内移动。

Answer 1

您可以使用元素的value和innerText属性和事件侦听器。

const src = document.getElementsByClassName("source");
const dest = document.getElementById("dest");

for (let i = 0; i < src.length; i++) {
  src[i].addEventListener("click", e => 
    dest.value += " " + src[i].innerText
  );
}

.source { 
  padding: 0.5em;
  cursor: pointer; 
}

<div>
  <span class="source">text 1</span>
  <span class="source">text 2</span>
  <span class="source">text 3</span>
</div>
<input id="dest">

Answer 2

这将为所有带有“ foo”类（您可点击的onclick）的元素添加inputs处理程序。如果out元素不为空，则处理程序会将单击的文本追加到out元素中现有文本的末尾，并在其前面加上一个空格字符。

const outElem = document.getElementById("out");
for (let f of document.getElementsByClassName("foo")) {
  f.onclick = (e) => {
    outElem.value += (outElem.value ? ' ' : '') + e.target.value;
  }
}

<input class="foo" id="t1" value="text1"><input class="foo" id="t2" value="text2"><input class="foo" id="t3" value="text3"><br>
<textarea id="out"></textarea><br>

将单击的文本移到输入文本框中

2 个答案: