Как запустить событие JavaScript после ввода определенного слова?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript, и я никак не могу ее решить. Мне нужно сделать так, чтобы после ввода слова “in” происходило определенное действие.

Конкретно, я хочу, чтобы скрытый div становился видимым (display:block) сразу после того, как пользователь напечатает “in”. Это должно работать как автоподсказка.

Структура ввода такая: [слово] [in] [слово].

Я пробовал использовать событие onkeyup, но у меня ничего не получается. Может кто-нибудь подсказать, как это правильно реализовать?

Вот пример кода, который я пытался использовать:

function checkInput(input) {
  let hiddenDiv = document.getElementById('подсказка');
  if (input.value.includes(' in ')) {
    hiddenDiv.style.display = 'block';
  } else {
    hiddenDiv.style.display = 'none';
  }
}

Буду очень благодарен за любую помощь!

2

Твой подход уже близок к правильному решению. Вместо includes() лучше использовать метод split() и проверять последнее введенное слово. Вот как это можно реализовать:

function checkInput(input) {
  const words = input.value.trim().split(' ');
  const lastWord = words[words.length - 1];
  const hiddenDiv = document.getElementById('подсказка');
  
  hiddenDiv.style.display = lastWord === 'in' ? 'block' : 'none';
}

Этот код будет срабатывать сразу после ввода ‘in’, даже если это не последнее слово в строке. Просто добавь эту функцию к событию input твоего поля ввода.

3

знаю такую задачку, сам недавно с ней мучился) тут фишка в том, что надо использовать регулярку для поиска слова “in”. вот как я бы это сделал:

function checkInput(input) {
  let hiddenDiv = document.getElementById('подсказка');
  let regex = /\bin\b/;
  if (regex.test(input.value)) {
    hiddenDiv.style.display = 'block';
  } else {
    hiddenDiv.style.display = 'none';
  }
}

регулярка \bin\b ищет именно отдельное слово “in”, а не часть другого слова. так ты избежишь ложных срабатываний. удачи с кодом!

4

Ребят, а может попробовать использовать addEventListener? Типа так:

input.addEventListener(‘input’, function() {
let words = this.value.split(’ ');
let hiddenDiv = document.getElementById(‘подсказка’);
hiddenDiv.style.display = words.includes(‘in’) ? ‘block’ : ‘none’;
});

Это должно сработать на любом месте ввода ‘in’. И код выглядит чище, как по мне. Что думаете?