'Is it possible to keep cursor in the text area after a click even?

I'm a front-end learner. I created a primitive app that I saw in Duolingo or Memrise. It consists of a text-area and buttons situated below with extra Spanish letters which can be used in necessary. I'm a Spanish learner and need to use the letters to type outside the language apps.

The problem is that when I type in the text and click on the button with a specific extra letter the cursor in the text area disappears. I need to click again in the text area. It's a bit annoying. In Duolingo it stays in the area and the use of mouse is reduced. Does anyone know how to fix it?

     <div class="container">
      <div class="input-container">
        <div class="upper-box">
          <textarea name="" id="textarea" rows="3"></textarea>
        </div>
        <div class="input-keyboard">
          <button id="a">á</button>
          <button id="e">é</button>
          <button id="i">í</button>
          <button id="o">ó</button>
          <button id="u">ú</button>
          <button id="n">ñ</button>
          <button id="exclamation">¡</button>
          <button id="question">¿</button>
          <button id="clear">Clear</button>
          <!-- input-keyboard ends below -->
        </div>
      </div>
    </div>

     const textarea = document.querySelector("#textarea");

// buttons

const clearBtn = document.querySelector("#clear");
const aBtn = document.querySelector("#a");
const eBtn = document.querySelector("#e");
const iBtn = document.querySelector("#i");
const oBtn = document.querySelector("#o");
const uBtn = document.querySelector("#u");
const nBtn = document.querySelector("#n");
const exlBtn = document.querySelector("#exclamation");
const queBtn = document.querySelector("#question");

aBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "á");
});

eBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "é");
});

iBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "í");
});

oBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "ó");
});

uBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "ú");
});

nBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "ñ");
});

exlBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "¡");
});

queBtn.addEventListener("click", function () {
  let inputText = (textarea.value += "¿");
});

clearBtn.addEventListener("click", function () {
  let inputText = (textarea.value = "");
});

    


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source