1

Я хочу сделать чтобы input'у вешался фокус когда он доскроливается до центра. Или при нажатии Enter ( Это я уже реализовал в скрипте ), если человек скроллит обратно, input'у вешается focus опять.

var inputs = document.querySelectorAll(".interview__item input");
inputs.forEach(function(input, i) {
    //Следим за нажатием кнопки
    input.addEventListener("keypress", function(e) {
        var key = e.key;

        //Если нажат Enter
        if (key === 'Enter') {
            //<input disabled .... />
            input.disabled = true;

            if(i < inputs.length - 1)
            //Переводим фокус на следующее поле
                inputs[i + 1].focus();

            input.disabled = false;

        }
    });
});
.interview__item{
  margin-top: 300px;
}

.interview__item:first-child{
  margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="maincontent__text">Вопрос <span class="maincontent__number"></span> из 4</p>


<div class="interview__input-wrapper">
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Ваше имя?</div>
    <input type="text" class="interview__input change__input" placeholder="Моё имя.." autofocus />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Сколько Вам?</div>
    <input type="text" class="interview__input change__input" placeholder="Мой возраст.." />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Какой стаж?</div>
    <input type="text" class="interview__input change__input" placeholder="Мой стаж.." />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">
      Сильные стороны?
    </div>
    <input type="text" class="interview__input change__input" placeholder="Мои сильные стороны.." />
  </div>
</div>

Буду очень признателен если поможете. Заранее спасибо!

1 ответ 1

4

Это только для затравки.

Потому как непонятно - какой элемент надо выделять если их несколько и т.д. и т.п.

var inputs = document.querySelectorAll(".interview__item input");
inputs.forEach(function(input, i) {
    //Следим за нажатием кнопки
    input.addEventListener("keypress", function(e) {
        var key = e.key;

        //Если нажат Enter
        if (key === 'Enter') {
            //<input disabled .... />
            input.disabled = true;

            if(i < inputs.length - 1)
            //Переводим фокус на следующее поле
                inputs[i + 1].focus();

            input.disabled = false;

        }
    });
});

// +++ Добавлено +++
var timerID = null;
window.addEventListener( 'scroll', function () {
    clearTimeout( timerID );
    timerID = setTimeout( scroll, 100 );
} );

function scroll () {
    var gbr, p, ci, cp;
    inputs.forEach( function ( i ) {
        gbr = i.getBoundingClientRect();
        p = Math.abs( window.innerHeight / ( gbr.top + gbr.height / 2 ) - 2 );
        if ( gbr.top > 0 && gbr.bottom < window.innerHeight && ( !ci || p < cp ) ) {
            ci = i;
            cp = p;
        }
    } );
    if ( ci ) {
        ci.focus();
    }
}
.interview__item{
  margin-top: 300px;
}

.interview__item:first-child{
  margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="maincontent__text">Вопрос <span class="maincontent__number"></span> из 4</p>


<div class="interview__input-wrapper">
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Ваше имя?</div>
    <input type="text" class="interview__input change__input" placeholder="Моё имя.." autofocus />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Сколько Вам?</div>
    <input type="text" class="interview__input change__input" placeholder="Мой возраст.." />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">Какой стаж?</div>
    <input type="text" class="interview__input change__input" placeholder="Мой стаж.." />
  </div>
  <div class="interview__item">
    <div class="interview__item-text interview__text-main">
      Сильные стороны?
    </div>
    <input type="text" class="interview__input change__input" placeholder="Мои сильные стороны.." />
  </div>
</div>

1
  • Огонь! Спасибо!!!
    – Dan
    9 янв 2019 в 19:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.