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

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 >
      <div >
        <div >
          <textarea name="" id="textarea" rows="3"></textarea>
        </div>
        <div >
          <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 = "");
});

CodePudding user response：

In each button click event, you can set focus the textarea after inserting the respective letter. Check below example (With jQuery):

$(document).on("click", "#a", function () {
    var text = $("#textarea").val();
    $("#textarea").val(text   'á');
    $("#textarea").focus();
}

Even with Javascript you can have a similar approach.

document.getElementById("textarea").focus();