将输入事件从一个元素传递到另一个元素

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

我正在尝试克隆输入字段,并将原始输入字段的输入重定向到克隆。我当前的解决方案看起来像这样,但是克隆上什么也没发生:

var original = document.getElementById("input1")
var clone = original.cloneNode(true)
clone.id += '-clone'
original.parentElement.append(clone)
original.addEventListener('keypress', function(event) {
  clone.dispatchEvent(new event.constructor(event.type, event))
  event.preventDefault()
  event.stopPropagation()
})
<input id="input1" />

如果将事件侦听器添加到按键事件的克隆中,它将成功触发,但该值保持为空。更改克隆值缺少的部分是什么?

编辑:适当的示例可以在Codepen上看到。

javascript html forms
1个回答
0
投票

我不确定这是否是您要寻找的,但我补充了

clone.value = original.value;

并且将按键更改为按键。

var original = document.getElementById("input1");
var clone = original.cloneNode(true);

clone.id += '-clone';
original.parentElement.append(clone);

original.addEventListener('keyup', function(event) {

  clone.value = original.value; // This what you are looking for?
  
  clone.dispatchEvent(new event.constructor(event.type, event));

  event.preventDefault();
  event.stopPropagation();
})
#input1 {
  background: orange;
}

#input1-clone {
  background: green;
}
<input id="input1" />

0
投票

如果只想重定向输入,则可以尝试此操作。该解决方案正在侦听input事件并将其设置为克隆的元素。

var original = document.getElementById("input1")
var clone = original.cloneNode(true)
clone.id += '-clone'
original.parentElement.append(clone)

original.addEventListener('input', function (event) {
    clone.value = event.target.value
});
<html>
  <body>
    <div>
      <input id="input1"/>
    </div>
  </body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.