单击事件后是否可以将光标保持在文本区域中？

Question

我是一名前端学习者。我创建了一个在 Duolingo 或 Memrise 中看到的原始应用程序。它由一个文本区域和位于下方的按钮组成，并带有额外的西班牙字母，可以在必要时使用。我是一名西班牙语学习者，需要使用这些字母在语言应用程序之外输入。

问题是当我输入文本并单击带有特定额外字母的按钮时，文本区域中的光标消失了。我需要在文本区域再次单击。这有点烦人。在 Duolingo 它停留在该区域并且减少了鼠标的使用。有人知道怎么解决吗？

     <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 = "");
});

    

Answer 1

在每个按钮单击事件中，您可以在插入相应的字母后设置焦点文本区域。检查以下示例（使用 jQuery）：

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

即使使用 Javascript，您也可以采用类似的方法。

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