Передача входного события от одного элемента к другому элементу - PullRequest
Новая
       0

Передача входного события от одного элемента к другому элементу

0 голосов
/ 21 октября 2019

Я пытаюсь клонировать поле ввода и перенаправить ввод исходного поля ввода к клону. Мое текущее решение выглядит так, но на клоне ничего не происходит: 

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 : мне нужно отформатированное значение в исходном поле ввода и исходное значение в клонированном поле.

Ответы [ 3 ]

0 голосов
/ 21 октября 2019

Если вы хотите перенаправить ввод, вы можете попробовать это. Это решение прослушивает событие 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>
0 голосов
/ 21 октября 2019

Похоже, что операционному оператору необходимо отформатировать ввод валюты, когда пользователь вводит текст, и хранить копию необработанных данных.

Таким образом, нам нужно как-то скрыть ввод, который фактически вводит пользователь, и показать отформатированный вводвместо этого.

Правильное событие для перенаправления ввода: .... на 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>
0 голосов
/ 21 октября 2019

Я не уверен, что это то, что вы ищете, но я добавил

clone.value = original.value;

и изменил нажатие клавиши на keyup. 

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" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...