Почему это текстовое поле теряет фокус с морфдом? - PullRequest
Новая
       42

Почему это текстовое поле теряет фокус с морфдом?

0 голосов
/ 13 октября 2018

Вот нижепридуманный пример, который изолирует мою проблему.Есть простое текстовое поле с сообщением, которое показывает, является ли количество символов четным.Если я перемещаю сообщение ниже текстового поля, кажется, что morphdom видит, что изменилось только значение текстового поля, поэтому он не перестраивает узел ввода, что означает, что элемент управления сохраняет фокус.Если я оставлю сообщение над текстовым полем, morphdom перестроит элемент управления, несмотря на то, что я указываю идентификатор.

Из документов ...

https://github.com/patrick-steele-idem/morphdom

Кроме того, алгоритм, используемый этим модулем, автоматически сопоставляет элементы, имеющие соответствующие идентификаторы и найденные как в исходном, так и в целевом дереве DOM.

Пример кода ...

https://codepen.io/anon/pen/NOvZJz

var text = "";
var origRootDiv = null;
function createView() {
  var rootDiv = document.createElement("div");

  // If moved under, issue goes away
  if (text.length > 0 && text.length % 2 == 0) {
    var messageDiv = document.createElement("div");
    messageDiv.innerHTML = "Even char count!";
    rootDiv.appendChild(messageDiv);
  }
  // End if

  var input = document.createElement("input");
  input.id = "this-should-help-right";
  input.value = text;
  rootDiv.appendChild(input);
  input.addEventListener("input", function(e) {
    text = e.target.value;
    var newRootDiv = createView();
    morphdom(origRootDiv, newRootDiv);
  });

  return rootDiv;
}
origRootDiv = createView();
document.body.appendChild(origRootDiv);

РЕДАКТИРОВАТЬ

Текущее поведение таково, что при вводе 1 символа в поле текстовое поле сохраняет фокус (хорошо), но если вы введете второй символ в поле и "Счет четных символов!"сообщение отображается, текстовое поле теряет фокус (плохо).

Желаемое поведение состоит в том, что даже если сообщение отображается, текстовое поле должно сохранять фокус.

1 Ответ

0 голосов
/ 13 октября 2018


Добавьте .focus() к входу, используя id.
см. https://www.w3schools.com/jsref/met_text_focus.asp

Решение

См. Обновленный код, 

input.addEventListener("input", function(e) {
      text = e.target.value;
      var newRootDiv = createView();
      morphdom(origRootDiv, newRootDiv);

      // added the input with Id here
      document.getElementById('this-should-help-right').focus();
    });


Я добавил document.getElementById('this-should-help-right').focus(); после morphdom вызова.Поэтому я думаю, что проблема решена

...