模拟输入字段中的键VANILLA Javascript [关闭]

问题描述 投票:0回答:2

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

((请使用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
        }
    })
javascript input key simulate
2个回答
0
投票

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

下面的代码段使用join()<span>方法在每个Array.from()元素上循环,以旋转数组中的元素并返回仅包含每个Array.from()map()值的新数组。现在您有了一个看起来像这样的数组。

map()

并且通过在该数组上使用textContent,您可以将其变成一个字符串,在每个单词之间留有空格。

<span>

['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()KeyboardEvent()dispatchEvent()代表空格键,但使用不同的方式。

dispatchEvent()
keydown

0
投票

如果您希望在按键时发生某些事情,可以将key添加到输入框中,但是很可能您想要keyCode,否则您将无法看到在输入中按下键的结果

© www.soinside.com 2019 - 2024. All rights reserved.