模拟输入字段 VANILLA 中的键 Javascript

Question

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

（请找到原版 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()，您可以在每个单词之间添加一个字符串，例如 space，或者如果需要，也可以添加一个字母。

下面的代码片段使用 Array.from() and map() 方法遍历每个 <span> 元素，将数组中的元素转换为 return 一个仅包含 textContent 的新数组每个 <span> 的值。现在你有一个看起来像这样的数组。

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

并且通过在该数组上使用 join(' ')，您可以将它变成一个字符串，每个单词之间有 space。

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 事件并检查按下的键是否是 space 栏。在下面的示例中，key、keyCode 和 code 代表 space 柱线，但方式不同。

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/

模拟输入字段 VANILLA 中的键 Javascript

Simulating a Key in Input Field VANILLA Javascript

javascript

key

input

simulate

编辑