模拟输入字段 VANILLA Javascript 中的键

Question

我觉得自己很愚蠢。我的英语不是很好，所以我在阅读解决方案时什么都听不懂。我为你们准备了一个实验室。请看一下。

(请找到解决方案作为Vanilla Javascript而不是JQuery(

.HTML：

<div id = "row1">
<span>Word</span>
<span>Word2</span>
<span>Word3</span>
</div>
<input id="inputfield">

.JS：

var childs = document.getElementById('row1').childNodes;
var input = document.getElementById('inputfield');
childs.forEach(e => {
if(e.innerText){
console.log(e.innerText);
input.value += e.innerText;
//simulate a key press right here (space)
//input's value have to be like this > Word Word2 Word3
}
})

Answer 1

在我看来，最简单的方法是拥有一个值数组，并使用数组的join()方法从中创建字符串。使用join()，您可以在每个单词之间添加一个字符串，例如空格或字母(如果需要(。

下面的代码片段使用Array.from()和map()方法循环访问每个<span>元素，以转换数组中的元素并返回仅包含每个<span>textContent值的新数组。现在你有一个看起来像这样的数组。

['Word', 'Word2', 'Word3']

通过对该数组使用join(' ')，您可以将其转换为每个单词之间的空格字符串。

var words = ['Word', 'Word2', 'Word3'];
words.join(' '); // "Word Word2 Word3"

var childs = document.querySelectorAll('#row1 span');
var input = document.getElementById('inputfield');
var words = Array.from(childs).map(child => child.textContent);
input.value = words.join(' ');

<div id = "row1">
<span>Word</span>
<span>Word2</span>
<span>Word3</span>
</div>
<input id="inputfield">

编辑

可以使用KeyboardEvent()构造函数创建自己的键盘事件。有了这个，您可以使用应该按下的键创建自己的事件。但是你必须监听事件，并且浏览器不知道如何处理它，除非你告诉它该怎么做。

使用dispatchEvent()您可以从某个元素触发事件。当您在该元素上侦听该事件时，您将捕获创建的事件。

在输入时，请侦听keydown事件并检查按下的键是否为空格键。在下面的示例中，key、keyCode和code表示空格键，但方式不同。

var childs = document.querySelectorAll('#row1 span');
var input = document.getElementById('inputfield');
input.addEventListener('keydown', event => {
if (event.key === "Space" || event.keyCode === 32 || event.code === '32') {
console.log('Spacebar simulated');
input.value += ' ';
}
});
childs.forEach(e => {
if (e.innerText) {
input.value += e.innerText;
var keydownEvent = new KeyboardEvent('keydown', {
key: "Space",
keyCode: 32,
code: '32'
});
input.dispatchEvent(keydownEvent);
}
});

<div id="row1">
<span>Word</span>
<span>Word2</span>
<span>Word3</span>
</div>
<input id="inputfield">

Answer 2

如果您希望按键发生某些事情，您可以将onkeypress="function()"添加到输入框中，但很可能您想要onkeyup="function()"，否则您将无法看到输入中按下的键的结果

<div id = "row1">
<span>Word</span>
<span>Word2</span>
<span>Word3</span>
</div>
<input id="inputfield" onkeyup="run(this)">

我不确定当按键发生时你想要发生什么，但你会像这样写你的 JS

const childs = document.getElementById('row1').childNodes;
const input = document.getElementById('inputfield');
childs.forEach(e => {
if(e.innerText){
console.log(e.innerText);
input.value += e.innerText + ' ';
// simulate a key press right here (space)
// input's value have to be like this > Word Word2 Word3
}
});

在这里查看JSFIDDLE：https://jsfiddle.net/kcbst5oe/1/