Вкладка Shift не сохраняет фокус элемента

Question

Javascript код версии - ссылка

 if (el.value.length > 1) {
    el.value = el.value[el.value.length - 1];
  }
  try {
    if (el.value == null || el.value == "") {
      this.foucusOnInput(el.previousElementSibling);
    } else {
      this.foucusOnInput(el.nextElementSibling);
    }
  } catch (e) {
    console.log(e);
  }

AngularJS код версии - ссылка

if (ele.currentTarget.value.length >= 1) {
            ele.currentTarget.value = ele.currentTarget.value[ele.currentTarget.value.length - 1];
  }
        try {
            if (ele.currentTarget.value === null || ele.currentTarget.value === "") {
                foucusOnInput(ele.currentTarget.previousElementSibling);
            } else {
                foucusOnInput(ele.currentTarget.nextElementSibling);
            }
        } catch (e) {
            console.log(e);
        }

Невозможно реализовать javascript версию

Tab & Shift + Tab

в AngularJS. Дайте мне знать, чего здесь не хватает!

Требование - как только вы введете значение для входного текста, следующий текстовый элемент ввода должен быть сфокусирован; На Shift-Tab должен быть выделен предыдущий элемент ввода текста.

Answer 1

Событие keyup запускается при каждом нажатии клавиши, включая нажатие клавиши Tab и Shift В этом разница между вашим javascript решением angularjs решением.

Я не уверен, есть ли эквивалент в oninput в angularjs. «keyup», «keydown», «input» работают по-разному. В angularjs есть ng-change, но для элемента ввода требуется ng-модель, и я не думаю, что $ event работает с ng-change.

В любом случае, есть работающее решение. Попробуйте это:

$scope.readKey = function(ele) {
        console.log(ele);
        if(ele.shiftKey) return;
        if (ele.currentTarget.value.length >= 1) {
            ele.currentTarget.value = ele.currentTarget.value[ele.currentTarget.value.length - 1];
        }
        try {
            if (ele.currentTarget.value === null || ele.currentTarget.value === "" ) {
                foucusOnInput(ele.currentTarget.previousElementSibling);
            } else {
                foucusOnInput(ele.currentTarget.nextElementSibling);
            }
        } catch (e) {
            console.log(e);
        }
    };

Этот код, прослушиваемый при keyup вместо ввода, не позволит go перейти к следующему полю ввода, если текущее поле ввода пусто. В вашем примере javascript код в обработчике ввода никогда не выполняется, поэтому вы можете перейти к следующему полю ввода, если текущее поле пусто.

Если вы хотите добиться того же самого в решении angularjs, попробуйте изменить условие на следующее:

if(ele.shiftKey || ele.keyCode === 9) return;

Это предотвращает выполнение кода, если его клавиша Shift или клавиша табуляции. 9 - это код клавиши для клавиши TAB.

Answer 2

Рабочий раствор - Ссылка

if(ele.key != "Tab" && ele.key != "Shift" ){
            if (ele.currentTarget.value.length >= 1) {
                ele.currentTarget.value = ele.currentTarget.value[ele.currentTarget.value.length - 1];
            }
            try {
                if (ele.currentTarget.value === null || ele.currentTarget.value === "") {
                    foucusOnInput(ele.currentTarget.previousElementSibling);
                } else {
                    foucusOnInput(ele.currentTarget.nextElementSibling);
                }
            } catch (e) {
                console.log(e);
            }
        }