JavaScript点击后如何保持焦点？ [复制]

Posted 2023-02-21

【中文标题】JavaScript点击后如何保持焦点？ [复制]

【英文标题】：How to maintain focus after click in JavaScript? [duplicate]

【发布时间】：2019-09-19 09:59:46

【问题描述】：

我使用代码向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 元素。

【问题讨论】：

我建议您为每个textarea 附加一个事件，当它们获得焦点并将对自身的引用存储在变量中时触发。然后，通过单击，您只需从该变量中读取哪个变量并将焦点重新设置为它。

我想知道这个问题与编程无关，因为有人投票决定关闭？！？！？！

我确定他们这样做了，因为您没有提供 可验证的样本 在问题中（正如您应该提供的那样），而是在小提琴中，当外部资源消失时，这篇文章的价值也会消失。因此，除了一个关于编程的问题之外，还有其他原因，一个人可以投票结束、赞成和反对，比如格式正确等。我相信你知道这一切。

@LGSon 我在这里提供了主要代码，它可以在没有外部链接的情况下运行（html 元素在这里很明显）。我没有抱怨投票结束，我只是感到困惑。

好吧，现在你知道我认为有人投票关闭的原因是什么。我现在也这样做了，作为重复关闭，并链接到 2 个帖子，其中有很多关于如何检测和/或存储在变量中的解决方案。

【参考方案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;
  )
)

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

当任何文本区域已经被聚焦时，调节“添加文本”

如您所见，处理“添加文本”锚标记上的点击事件的函数进行了一些最小的修改：

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/