Блог

Я пытаюсь установить или загрузить значение в моем поле ввода так быстро, когда страница загружается. С моим кодом ниже я замечаю, что поле ввода пусто примерно на секунду или 2 секунды, прежде чем значение будет заполнено в поле ввода. Есть ли способ заставить поле ввода загружаться вместе со значением?

Loader.JS

    const myKey = document.querySelectorAll('.key__input');
document.onreadystatechange = function () {
    if (document.readyState === "complete") {
        myKey.forEach(function (key) {
            key.value = "Hello Stack OverFlow";
            key.focus();
        })

    }
}
  

Вам нужно обернуть свой код в DOMContentLoaded:

Событие DOMContentLoaded срабатывает, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и вложенных фреймов.

 window.addEventListener('DOMContentLoaded', function(e) {
    const myKey = document.querySelectorAll('.key__input');
    myKey.forEach(function (key) {
        key.value = "Hello Stack OverFlow";
        key.focus();
    })
})  

 <input type="text" class="key__input">  

Вы должны записывать событие в окне: событие DOMContentLoaded (DOM Ready) не в Документ: событие readystatechange

  const keyInputs = document.querySelectorAll('.key__input');
 window.addEventListener('DOMContentLoaded', (event) => {
    keyInputs.forEach(function(keyInput) {
       keyInput.value = "Hello Stack OverFlow";
       keyInput.focus(); //focus will remain on the last selected element
     })
});