How to make a block is displayed only when typing a certain phrase in the input?

The essence of the question that would be on the website to show information in different words.
For example someone writes in the input field "Admin" and the bottom text appears and so on.
If you write "toaster" will be released another block, and so on.
It would be even better if it would be impossible to read through the "developer tools F12" to whom what information is presented
March 12th 20 at 08:08
3 answers
March 12th 20 at 08:10
March 12th 20 at 08:12
When changing in input do Ajax request that send data input to a server. On the server verify that it is, generate the layout you need and give back to the user. For complete Ajax inserts received from the server markup in the right place.
If I knew how - I wouldn't have called for help, unfortunately I kettle in this regard - loyce.Gra commented on March 12th 20 at 08:15
@loyce.Gra, unfortunately, there are a couple of lines of code is not enough, and the finished implementation it is already possible to sell) - halie.Ro commented on March 12th 20 at 08:18
@halie.Ro, I meant that after the field input will be a button that will read what is there and if it is "word1" then show this block if "word2" then this
came across a couple of implementations on the Internet, but everywhere you can read from the console - loyce.Gra commented on March 12th 20 at 08:21
@loyce.Gra, You work with the DOM, if you don't want folks to read with F12, use frameworki VEB , for example at the VUE
<div v-if="input === 'admin'">
Block for admin
</div>


This unit will not be visible in the DOM, but will be available in the inspector js, and not any want in inficirovannye code to understand . - alexandro_Bedna commented on March 12th 20 at 08:24
@cool_grass, I'm sorry and then the oak, in General, I just kettle and would like to experience, if you have the opportunity to draw a picture of how to pull some html code from the database or as You suggested the VUE, I would be very grateful, unfortunately not financial - loyce.Gra commented on March 12th 20 at 08:27
@cool_grass, you understand that if the inspector in the final marking your vue code can not see, using ctrl+u clear all the giblets?) the only true option described above is to generate markup on the server - asia.Zulauf commented on March 12th 20 at 08:30
@asia.Zulauf, In 2ะบ19 to generate markup on the server ... - alexandro_Bedna commented on March 12th 20 at 08:33
March 12th 20 at 08:14
Use the methods from this article https://learn.javascript.ru/keyboard-events
You will approach ketup. Hook it into your input. Write a code which will be each time you press(release) keypad buttons to compare all the entered values from the input, with your conditions and show certain blocks.

About the developer console, see everything you can see on the website. But you can't do the showing/hiding blocks directly on the page, and download and delete individual files with your blocks. For example, use ajax to load.
I meant that after the field input will be a button that will read what is there and if it is "word1" then show this block if "word2" then this - loyce.Gra commented on March 12th 20 at 08:17

Find more questions by tags HTMLjQueryJavaScriptCSS