点击JavaScript后如何保持焦点？

Question

我将带有代码的文本添加到textarea

document.getElementById("b").addEventListener("click", 
function(e) {
  e.preventDefault();
  var text='test',txtarea;
  // Problem
  var t = document.getElementsByTagName('textarea');
    for(var i =0 ;i<t.length;i++){
    if(t[i]==document.activeElement) {txtarea=t[i]}
    }
  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  strPos = txtarea.selectionStart;
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  txtarea.scrollTop = scrollPos;
}
);

JSFIDDLE

我想在页面中找到重点突出的textarea（目前正在写作）。

我创建了一个循环来检查哪个textarea的焦点，但是它不起作用可能是因为当我单击焦点时，焦点从textarea到a转移了。

Answer 1

您说对了，当您单击按钮时，活动元素实际上是锚标记。因此，要克服这一点，您需要将一个textarea是最后一个重点放在一个全局变量中，这样它就不会与 document.activeElement。

将最后关注的元素保存在某处

一种解决方案是为每个文本区域创建一个事件侦听器：

var previouslyFocused = null; //This should be in global scope

let textareas = document.querySelectorAll("textarea");
textareas.forEach(t=>{
    t.addEventListener("focus",(e)=>{
        window.previouslyFocused = e.target;
  })
})

现在，每个文本区域标签都有一个事件侦听器，当它们中的任何一个被聚焦时，它将使用最后一个聚焦元素来更新全局变量。

在任何文本区域都处于聚焦状态时，条件为“添加文本”

处理“添加文本”锚标签上的click事件的函数具有一些最小的修改，如您所见：

document.getElementById("b").addEventListener("click", function(e) {
  e.preventDefault();
  var text='test',
        activeTextArea,
        elements = document.querySelectorAll('textarea');

      if(window.previouslyFocused == null){
        activeTextArea = elements[0];
      }else{
        activeTextArea = window.previouslyFocused;
      }

  var strPos = activeTextArea.selectionStart,
      front = (activeTextArea.value).substring(0, strPos),
      back = (activeTextArea.value).substring(strPos, activeTextArea.value.length);
      activeTextArea.value = front + text + back;
      strPos = strPos + text.length;
      activeTextArea.selectionStart = strPos;
      activeTextArea.selectionEnd = strPos;
      activeTextArea.focus();
});

我只修改了变量，并添加了条件if语句，以检测何时尚未聚焦任何文本区域，如果是，则将文本添加到第一个文本区域。

您还可以将其更改为在任何文本区域都已聚焦时不执行任何操作。由您决定。

提琴：

https://jsfiddle.net/nbz3xw1g/2/