Question

我有一个没有初始值的输入标记，以及三个文本元素：

<input type='text' value=''/>
<p id='1'>Alpha</p>
<p id='2'>Beta</p>
<p id='3'>Gamma</p>

我想通过JavaScript做的是添加“alpha＆＃39;当用户点击“Alpha＆＃39;”的文字时输入值。然后，如果用户继续点击测试版，我想要＆＃39; Beta＆＃39;要添加到值。因此，如果用户点击alpha然后是beta，我希望输入值为＆＃39; alpha beta＆＃39;。我需要这个才能适用于点击的三个单词的任意组合。

换句话说，我正在寻找javascript来获取某个值并将其添加到输入值的末尾，而不是完全替换它。

任何帮助都将不胜感激。

Answer 1

我建议你使用jQuery。在html中，更新类和id：

<input type='text' value='' id='inputTarget'/>
<p id='1' class='textInput'>Alpha</p>
<p id='2' class='textInput'>Beta</p>
<p id='3' class='textInput'>Gamma</p>

在js：

$('.textInput').onclick(function(){
   var t = $('#inputTarget').val();
   t += ' ' + $(this).text();
   $('#inputTarget').val(t);
});

Answer 2

一个vanilla JavaScript替代方案（我已将id属性添加到输入中）：

var inputTarget = document.getElementById("inputTarget");

var els = document.querySelectorAll("p");
for (var i = 0; i < els.length; i++) {
  els[i].addEventListener("click", function(e) {
    inputTarget.value = inputTarget.value + " " + e.target.innerHTML;
  });
}

https://jsfiddle.net/tfsrrny4/

使用Javascript编辑html输入元素的内容

2 个答案: