Правильный способ переключения классов CSS на элемент onfocus и onblur (чистый JS)

Question

Я - разработчик на стороне сервера, немного занятый JS front-end. Недавно я добавил в свои веб-приложения строку меню position:fixed (предназначенную для мобильного Интернета).

Работает нормально. Но есть проблема с юзабилити. Когда виртуальная клавиатура открывается, нижнее меню естественно перемещается вместе с ней. Иногда это покрывает textareas или inputs, которые пользователь должен был ввести.

Теперь у рассматриваемого веб-приложения есть тонна пользовательского контента. Er go может быть несколько textareas или input элементов на данной странице.

Как использовать чистый JS для установки position:absolute в данной строке меню, когда фокусируется любая текстовая область или ввод, и сбросить его на position:fixed, когда указанная фокусировка потерян (то есть размыт)?

---

Вот как я настроил строку меню:

.design{
    background:coral;
    height:40px;
    width:100%;
    text-align:center;
    color:white;
    z-index:89;
}
.fix-it{
    position: fixed;
    bottom:0;
}
.abs-it{
    position: absolute;
    bottom:0;
}

<div id="bottom_nav" class="fix-it design">
BOTTOM MENU
</div>

Мои чистые JS знания находятся в процессе разработки. Я пытаюсь выполнить свое требование с помощью следующего чистого JS (и не удается):

// selecting all textareas or inputs for processing (e.g. making fixed bottom menu 'absolute')
var input_btns = document.getElementsByClassName('inp');

// ensuring relevant CSS classes applied onfocus and onblur
for (var i=0, len=input_btns.length; i < len; i++) {
    input_btns[i].onfocus = document.getElementById("bottom_nav").classList.remove('fix-it').add('abs-it');
    input_btns[i].onblur = document.getElementById("bottom_nav").classList.remove('abs-it').add('fix-it');
}

---

К сожалению, это не работает. После инициализации строка меню становится лишенной какого-либо класса CSS !?

Я в тупике. Может ли эксперт помочь мне исправить мой код? Я предпочитаю чистые JS решения по сравнению с необходимостью использовать любую библиотеку для такой элементарной задачи.

Answer 1

Вы должны обернуть document.getElementById("bottom_nav").classList.remove('fix-it').add('abs-it'); в функцию, поэтому она запускается только при срабатывании события

следующим образом:

    input_btns[i].onfocus = () => {
      document.getElementById("bottom_nav").classList.remove('fix-it');
      document.getElementById("bottom_nav").classList.add('abs-it');
    }

Когда вы делаете присвоение кода после = выполняется немедленно; Вам нужна функция, которая выполняет код только при ее вызове.