Question

我正在尝试克隆输入字段，并将原始输入字段的输入重定向到克隆。我当前的解决方案如下所示，但是克隆上没有任何反应：

var original = document.getElementById("input1")
var clone = original.cloneNode(true)
var formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
})

clone.id += '-clone'
original.parentElement.append(clone)
original.addEventListener('keydown', function (event) {
clone.dispatchEvent(new event.constructor(event.type, event))
    event.preventDefault()
    event.stopPropagation()
})

original.addEventListener('keyup', function (event) {
    original.value = formatter.format(clone.value)
})

<input id="input1" />

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

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

编辑2：无法将值传递给克隆的原因是，我需要格式化输入字段值，但也需要原始输入。因此，clone.value = event.target.value;不是解决方案。

TL; DR ：我需要原始输入字段中的格式化值和克隆字段中的原始值。

Answer 1

我不确定这是否是您要寻找的，但我添加了

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" />

Answer 2

如果您只想重定向输入，则可以尝试此操作。该解决方案正在监听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>

Answer 3

OP似乎需要在用户输入时格式化货币输入并保留原始数据的副本。

因此，我们需要以某种方式隐藏用户实际键入的输入，并显示格式化的输入。

用于重定向输入的正确事件是...在input上。

在格式化的输入上显示插入符号是很棘手的，但我将尝试编辑答案以解决此问题。

下面的（一个）工作示例：

var original = document.getElementById("input1");
var clone = original.cloneNode(true);
clone.id += '-clone';
original.parentElement.parentElement.append(clone);
var formattedClone = original.cloneNode(true);
formattedClone.id += '-formatted-clone';
original.parentElement.insertBefore(formattedClone, original);

original.addEventListener('input', function(event) {
  const currency = 'GBP';
  const locale = 'en-GB';
  // const formattedValue = event.target.value;
  const formatter = new Intl.NumberFormat(locale, { style: 'currency', currency: currency });
  // const raw = formatToRaw(formattedValue, formatter);
  original.value = event.target.value;
  formattedClone.value = formatter.format(event.target.value);
  clone.value = event.target.value;
});

#input1 {
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
}

#wrapper {
  position: relative;
}

<div id="wrapper"><input id="input1" /></div>

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

3 个答案: