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

Question

[olrugames]

Суть вопроса в том, что бы на сайте показывать информацию по разным словам.
Например кто-то напишет в поле input "Админ" и снизу появится текст и пр.
Если напишет "тостер" выйдет другой блок, и так далее.
Было бы еще лучше если нельзя было бы прочитать через "инструменты разработчика, F12" кому какая информация преподносится

Answer 1

[Ihor Bratukh]

Answer 2

[Андрей Гончаров]

При изменении в инпуте делай аякс запрос, в котором отправляй данные инпута на сервак. На серваке проверяй, что пришло, генерируй разметку нужную и выдавай обратно юзеру. По комплиту аякса вставляй полученную от сервера разметку в нужное место.

Comments

[olrugames]

Если бы я все это умел - я не обратился бы за помощью, к сожалению я чайник в этом плане

[Андрей Гончаров]

olrugames, к сожалению, тут парой строк кода не обойтись, а готовую реализацию уже можно продавать)

[olrugames]

Андрей Гончаров, Я имел ввиду что после поля инпут будет кнопка, которая будет уже читать что там находится и если это "слово1" то покажем этот блок, если "слово2" то этот
наткнулся на пару реализаций в интернете, но везде можно прочитать из консоли

[Владислав Поляков]

olrugames, Вы работаете с DOM, если вы не хотите , чтоб люди могли просто прочитать при помощи F12, используйте вэб фрэймворки , к примеру на VUE

<div v-if="input === 'admin'">
Block for admin
</div>

Этот блок не будет виден в DOM, но будет доступен в инспекторе js, и не любой захочет в минифицированном коде разбираться .

[olrugames]

Владислав Поляков, я к сожалению и тут дуб, в целом я просто чайник и хотел бы получить опыт в этом плане, если есть возможность обрисовать картину как дернуть некий html код из базы или как Вы предложили VUE, буду очень благодарен, к сожалению не финансово

[dramiel007]

Владислав Поляков, вы же понимаете, что если в инспекторе в финальной разметке ваш vue-код не увидят, то через ctrl+u видно все потроха?) единственно верный вариант описан выше - генерировать разметку на сервере

[Владислав Поляков]

dramiel007, В 2к19 генерировать разметку на сервере ...

Answer 3

[Isherath]

Воспользуйтесь методами из этой статьи https://learn.javascript.ru/keyboard-events
Вам подойдет ketup. Прицепите его в вашему input. Напишите код, который будет при каждом нажатии(отпускании) кнопок клавиатуры сравнивать все набранное значения из инпута с вашими условиями и показывать определенные блоки.

Насчет консоли разработчика, там видно все, что вы можете видеть на сайте. Но можно сделать не отображение/скрытие блоков непосредственно на странице, а загрузку удаление отдельных файлов с вашими блоками. Например, использовать ajax для загрузки.

Comments

[olrugames]

Я имел ввиду что после поля инпут будет кнопка, которая будет уже читать что там находится и если это "слово1" то покажем этот блок, если "слово2" то этот