2

I add text to a textarea with the code

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

I want to find the focused textarea (one in which writing currently) in the page.

I created a loop to check which textarea is focused, but it does not work probably because when I click the focus shifts from the textarea to a element.

Googlebot
  • 15,159
  • 44
  • 133
  • 229
  • 3
    I suggest you attach an event to each `textarea`, which fire when they get focus and store a reference to itself in a variable. Then, with your click, you simply read which one from that variable and reset focus to it. – Asons Apr 30 '19 at 17:33
  • I wonder how this question is not about programming, as someone voted to close?!?!?! – Googlebot Apr 30 '19 at 17:42
  • I'm sure they did because you didn't provide a _verifiable sample_ **within** the question (as you are supposed to), but rather in a fiddle, and when that external resource die, so does the value of this post. So there are other reasons than if a question is about programming, for which one can both vote to close, up- and downvote, like properly formatted etc. I am sure you are aware of all that though. – Asons Apr 30 '19 at 17:47
  • @LGSon I provided the main code here, which can stand without the external link (the HTML elements are evident here). I don't complain about the vote to close, I am just confused. – Googlebot Apr 30 '19 at 18:00
  • Well, now you know what I think were the reason someone voted to close. I also did now, to close as a duplicate, and linked to 2 posts that has a lot of solutions on how to detect and/or store in a variable. – Asons Apr 30 '19 at 18:11
  • @LGSon that's a legitimate reason and indicates my failure to find an available answer. But still, I do not comprehend how one can consider this a non-programming question. – Googlebot Apr 30 '19 at 18:22
  • Nobody says it is a non-programming question, what I say is there are other reasons one can vote on a post, e.g. being poorly formatted, lack of research, etc. So even if it is about programming you aren't protected against voting in any way. Don't waste time on why, move forward with your projects. – Asons Apr 30 '19 at 18:25

1 Answers1

1

You are right saying that when you click on the button, the active element is actually the anchor tag. So to overcome this, you need to save in a global variable which textarea was the last one focused, this way it wont have any conflict with document.activeElement.

Save last focused element somewhere

A solution to this would be creating an event listener for every textarea:

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

And now, every text area tag has an event listener that when any of them is focused, it updates your global variable with the last focused element.

Conditioning "add text" when any textarea has been focused yet

And your function that handles the click event on your "add text" anchor tag has some minimal modifications as you can see:

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();
});

I only modified the variables and added a conditional if statement to detect when any text area hasn't been focused yet, and if so, add the text to the first one.

You could also change this to just do nothing when any text area has been focused yet. It is up to you.

Fiddle:

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

k3llydev
  • 2,057
  • 2
  • 11
  • 21