我正在尝试克隆输入字段,并将原始输入字段的输入重定向到克隆。我当前的解决方案看起来像这样,但是克隆上什么也没发生:
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上看到。
我不确定这是否是您要寻找的,但我补充了
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" />
如果只想重定向输入,则可以尝试此操作。该解决方案正在侦听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>