1

Столкнулся с проблемой. Хочу чтобы при вводе в инпут текста добавлялось в содержимое элемента h1 с задержкой 300мс.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
    <h1 id="title"></h2>
    <input type="text" id="input">
</body>
</html>
let input = document.querySelector('#input');
let title = document.querySelector('#title');

function replaceTitle(e) {
  e.preventDefault();
  title.textContent = input.value;
}

setTimeout(replaceTitle(), 300);
4
  • Да, добавлялось всё-таки
    – Smekalinho
    10 фев 2021 в 10:31
  • setTimeout(replaceTitle(), 300); должно быть setTimeout(replaceTitle, 300); 10 фев 2021 в 10:43
  • <h1 id="title"></h2> должно быть <h2 id="title"></h2> 10 фев 2021 в 10:44
  • Спасибо за помощь!
    – Smekalinho
    10 фев 2021 в 10:46

3 ответа 3

1

Попробуйте повесить на событие ввода.

let input = document.querySelector('#input');
let title = document.querySelector('#title');

input.addEventListener("keyup", (e)=>{
  e.preventDefault();
  setTimeout(replaceTitle, 300);
});

function replaceTitle() {
  title.textContent = input.value; // это замена title
  document.title = input.value; // это замена title документа
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>
<body>
    <h2 id="title"></h2>
    <input type="text" id="input">
</body>

3
  • Спасибо за помощь, однако задержка не срабатывает, мне нужно чтобы по ходу ввода текста содержимое в h2 не изменялось, а обновлялось через 300 мс после завершения ввода.
    – Smekalinho
    10 фев 2021 в 10:38
  • @Smekalinho Изменил. Не заметил 10 фев 2021 в 10:40
  • @Smekalinho У события keyup есть недостаток - привязка к нажатию кнопок, лучше использовать событие input т.е. все тоже самое только событие не "keyup" а "input" ,разница в том что если я что то копирую ctrl+C - и вставить правой кнопкой мышки- keyup не сработает а input-у всеравно как будут изменятся значения
    – Greg--
    10 фев 2021 в 12:12
0

     // add element, style and class
        let input = document.createElement('input');
        input.classList.add('input')
        input.type = 'text';

        let h2 = document.createElement('h2');
        h2.classList.add('head')
        h2.style.padding = '10px 0';
        h2.style.backgroundColor = '#eee';

        document.body.append(input);
        document.body.append(h2);

        // function
        // Ищем элементы по классу
        let classInput = document.querySelector('.input');
        let classHead = document.querySelector('.head');
        
        // Пустая переменная для взаимодействия с ( clearTimeout() ) и ( setTimeout() )
        let timeout;
        
        // Функция которая выводит текст из ( input ) в ( h2 )
        function inputText() {
            // используем ( .textContent ) чтобы избежать неприятностей :)
            classHead.textContent = classInput.value;
        }

        // Функция которая дает нам задержку
        function outputText() {
            // Здесь будет очищаться наш таймаут.
            // Пока текст набирают со скоростью 300мс и меньше(оооочень быстро),
            // то текст не покажется в заголовке
            timeout = clearTimeout(timeout);
            // Здесь выводиться текст в заголовке с задержкой в 300мс
            // Используем нашу функцию что выше ( inputText )
            timeout = setTimeout(inputText, 300);
        }
        
        // Запускаем нашу функцию ( outputText ) по событию ( input )
        // input - ввод(взаимодействие) текста(с нашей строкой ввода)
       classInput.addEventListener('input', outputText);

Как-то так. Только что все теги тоже через JS добавил. А так принцип поиска по классу. Буду думать что помогло :)

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 5 дек 2022 в 19:15
-1

document.addEventListener("DOMContentLoaded", function () {
  let input = document.createElement("input");
  document.body.append(input);
  let h2 = document.createElement("h2");
  document.body.append(h2);
  let timeout;
  
  function enteringText() {
    let text = input.value;
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      h2.innerHTML = text;
    }, 300);
  }

   input.addEventListener("input", enteringText);
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="example_2.js"></script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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