in contenteditable = “true” when entering a special character show a list from which to choose

Question

In general, I do not know how to formulate a thought correctly, but the essence of the problem is this:

I work across the field

<div contenteditable="true" >

It is necessary that when the user wrote the text and when you entered the character & or @, prompts were displayed, in my word from the database there is a list of words from which the user can choose how much he needs ..

the simplest example is as in instagram when the user enters @ then the user field goes out

Please tell me which way to dig ... I dug up the whole Internet and I can not understand what it is all about ....

Please, help!!!

Answer 1 · 2015-08-31T00:36:04

Digging into a keypress subscription is logical?

 document.getElementById("ce").addEventListener('keypress', function (e) { if (e.key === "@") { console.log("It's time to menu!"); } });

 #ce { border: 1px solid; } #ce:after { content: " "; }

 <p id=ce contenteditable>

Well, finish crossbrowser as needed.

in contenteditable = “true” when entering a special character show a list from which to choose

1 answer 1

More articles: