pure javascript side-menu with keyboard key on editibale div

Question

I'm trying to create and make a div into a document where I can write & each time I click a keyboard key ":" a window appear close to it like a side menu . I can't seems to find anything on google regarding the popping window relative to the keyboard key text.. in pure vanilla JavaScript if possible I need help i been stuck with this for over a week....

.panel {
    transform: scale(1);
    display : none;
    position: absolute;
    border-radius: 3px;
    width: 450px;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.24);
    min-height: 73vh;
    background-color: rgb(255, 255, 255);
  }

  <div class="zzz"
    style="border: red 1px solid;margin:0 auto ;width:400px; height:400px;" 
    spellcheck="true" placeholder="Type '/' for commands" 
    data-root="true" class="notranslate" contenteditable="true"></div>
    
    <div class="panel"></div>

P/S . it's something quit like when you write ":" on motion and it show up Emoji pop up panel

you want a popped up `window` or for `div .panel` to pop up? — The Bomb Squad, Feb 23 '21 at 12:24
https://stackoverflow.com/questions/1589721/get-selected-text-position-and-place-an-element-next-to-it/1589912#1589912 — The Bomb Squad, Feb 23 '21 at 12:47

score 1 · Answer 1 · answered Feb 23 '21 at 12:18

1

I think you need to use a textarea HTML Element due to purposes of it usage. I just left a link of my solution. I hope, I understood you correctly. JS part looks like...

const textarea = document.getElementById('textarea');
const popup = document.getElementById('popup');

textarea.addEventListener('keypress', (e) => {
    const keyCode = e.keyCode || e.which;

    if (keyCode === 58) {
        popup.style.display = 'block';
    } else {
        popup.style.display = 'none';
    }
})

Whole solution here https://codepen.io/Brudenshtal/pen/PobObNK?editors=1010

answered Feb 23 '21 at 12:18

Anton Platon

98
5

i did the exact same thing but the pop up box show up very far away from the text area i want it to act like some kind a side menu showing up on the location of the keypress " : " – Namlind Feb 23 '21 at 12:33
i want something like this https://i.imgur.com/SoSxdd8.png – Namlind Feb 23 '21 at 12:38
OK. Memorise my solution and merge it with this) https://medium.com/@jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a – Anton Platon Feb 23 '21 at 12:54
way too complicate solution ... at my current level.. – Namlind Feb 23 '21 at 15:51

pure javascript side-menu with keyboard key on editibale div

1 Answers1