Textarea that calls a User List when the F2 key is pressed

Asked

Viewed 88 times

3

Good morning

Personal was given me a task that is being challenging. I need to develop a textarea when I click the F2 key inside the textarea, a list of system logins appears.

Something similar was seen on Whatsapp, when you send a message to a group you put @ and list your contacts to mark the same in the message.

Would anyone know how to inform how I do textarea occur this?

I thought as follows (I don’t know if it would be the right way):


<!-- language: lang-html -->

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div>
        <label for="Comentario"> Comentário </label>
        <div>
          <textarea id="ComentarioText" onkeyup="listaUsuario()" 
               onfocus="this.rows=5" onblur="this.rows=1" rows="1"> 
          </textarea>                                                       
       </div>
    </div>
    <script>    
       function listaUsuario() {

         //Quando clicar sobre o F2 à lista de usuários cadastrados               
         if (event.keyCode == 113) {
            window.alert("O código: " + event.keyCode);
         }
       } 
    </script>
  </body>

<!-- end snippet -->

Until capturing the key I managed to do, now my doubt is how I move up a list of users, based on this action?

I couldn’t find anything that would shed some light, someone could give me a north to follow?

javascript html

  • Where is the list of users, and if you are in a BD, which back-end language?

  • Vinicius currently the list of users is in mysql in the login table where I have loginid and logname, the back-end language that I will use is php.

3 answers

1

the variable "users" is simulating all the logins that you recovered from the database, if you put the code you use to recover this information I can edit this answer and help you better

let users = [
        {
            login: "Wilbor",
            senha: "asdfa@j12"
        },
        {
            login: "Wilson",
            senha: "wertwet@u7312"
        },
        {
            login: "Junior",
            senha: "yuioyuo@82"
        }
      ];
 function listaUsuario() {
            //Quando clicar sobre o F2 à lista de usuários cadastrados               
            if (event.keyCode == 113) {
                console.log("O código: " + event.keyCode);
                let conteudo='Lista de Usuários:\n';
                for (let i = 0; i < users.length; i++) {
                    conteudo+= '\n'+(i+1)+') Login: '+users[i].login+' | Senha: '+users[i].senha;
                }
                const campo = document.getElementById('ComentarioText');
                campo.style.width='300px';
                campo.style.height='200px';
                campo.innerHTML=conteudo;
            }
        } 
<div>
        <label for="Comentario"> Comentário </label>
        <div>
            <textarea id="ComentarioText" onkeyup="listaUsuario()" 
                onfocus="this.rows=5" onblur="this.rows=1" rows="1"> 
            </textarea>                                                       
        </div>
    </div>

  • Thanks for the help

  • The community grows more when we are more willing to help our neighbor, Success!

1

You can put an eventListener in the window when the textarea is with Focus. Ai vc do your if if user press F2 to show a modal that your list will be in.

Here’s a very basic example, but I think it might help you.

let txt = document.querySelector('textarea');

txt.addEventListener('focus', () => {
  console.log('focou: ' + txt);

  function listaUsuario() {
    //Quando o textarea estiver focado, se apartar f2 ele imprime o evento
    if (event.keyCode == 113) {
      console.log("Apertou F2: " + event.keyCode);
      var modal = document.querySelector('.modal');
      modal.classList.add('ativo');
    }
  }
  window.addEventListener('keydown', listaUsuario);
})
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: red;
  text-align: center;
  font-size: 50px;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal.ativo {
  display: flex;
}

section {
  max-width: max-content;
  background-color: #ffffff;
  margin: auto;
  padding: 10px;
}
<p> Se vc focar no textarea abaixo e apertar f2 vai aparece o modal com a lista...</p>

<textarea name="" id="" cols="30" rows="10"></textarea>


<div class="modal">
    <section>minha lista</section>
</div>

  • Thanks for the help already gave me an idea of how to proceed

  • @Ederluca tranquil tmj

0

Another example that can help!

const users = ['maria','rita','joana'];

function myFunction(event){

  if (event.keyCode === 113){           
     document.getElementById('users').classList.add('show');
  }

}

function createListItens(){
  
   const ul = document.getElementById('users-list');
    
    users.forEach(user => {
      
      const li = document.createElement('li');
      li.innerText = user;
      
      li.addEventListener('click', function(event){ 
        let textarea = document.getElementById('textarea');    
        let value = textarea.value + this.innerText;        
        textarea.value = value;
        document.getElementById('users').classList.remove('show');
      });
      
      ul.appendChild(li);      
    });

}

createListItens();
#wrapper {
  position: relative;
}

#users {
  position: absolute;
  top: 100;
  left: 0;
  border: 1px red solid;
  display: none;
}

#users.show {
  display: block;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  background-color: gold;
}

li {
  cursor: pointer;
  padding: 10px;
}

li:hover {
  background-color: lightgray;
}
<div id="wrapper">
  <p>Carrega em F2 para listar usuarios (com o focus na textarea).</p>
  <textarea id="textarea" rows="4" cols="50" onkeyup="myFunction(event,this);"></textarea>
  <div id="users">
    <ul id="users-list"></ul>
  </div>
</div>

  • Thanks for the help

  • Good morning I was studying your code and I came up with a question is possible to put by after I type F2 what I type in the textarea it filter in the list example: I typed F2 right after typed Rita appear only Rita in the list?

  • @Ederluca yes, it is possible, in several ways... the textatea has more text or will only have the name of the user for filtering?

  • Unfortunately it will get more text type this textarea will be a comments field where the person will put users according to the list and continue writing

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.