Как найти активный textarea среди других?

Question

[Александр]

Здравствуйте, уважаемые программисты. Назрел вопрос.
Пользователь на сайте может отправлять сообщение по клику клавиш ctrl+enter

document.onkeydown=key;
function key() {
  window.status=event.keyCode;
 if((event.ctrlKey) && ((event.keyCode == 0xA)||(event.keyCode == 0xD)))// Если нажали ctrl+enter
        {
         // Кликаем по кнопке отправки сообщения
         if($("textarea").is("#edit")){$("#addMsgEdit").trigger('click')}
        }
}

Такой код работает, но когда известен идентификатор textarea.
А если у меня их может быть большое кол-во на странице и динамически подгружаемые?
Как мне при клике по ctrl+enter получить объект именно той textarea которая сейчас активна?

Answer 1

[0xD34F]

Так как получать элемент вы собираетесь внутри обработчика события, возникающего на этом элементе, то ничего искать не надо, всё уже есть - event.target. Надо только (так как обработчик делегированный) убедиться, что событие случилось действительно на одном из интересующих вас элементов (раз это textarea, то, например, путём проверки свойства tagName у целевого элемента).

Comments

[Александр]

а обработчик разве укажет на текстовое поле? Он разве не слушает именно нажатия клавиш?

[Andrew]

Александр, он вам скажет где нажато было.через event.target в качестве аргументов

Answer 2

[Николай Ланец]

Можно что-то типа такого:

// Import stylesheets
import "./style.css";

document.onkeydown = key;
function key() {
  window.status = event.keyCode;
  if (event.ctrlKey && (event.keyCode == 0xa || event.keyCode == 0xd)) {
    // Если нажали ctrl+enter
    // Кликаем по кнопке отправки сообщения

    const { target } = event;

    const { nodeName, name, value } = target;

    console.log("event", target, nodeName);

    if (nodeName === "TEXTAREA") {
      console.log("Clicked textarea ", name, value);
    }
  }
}

// Write Javascript code!
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>JS Starter</h1>

<textarea name="tx1" ></textarea>
<textarea name="tx2" ></textarea>
<textarea name="tx3" ></textarea>
`;

Поиграться: https://stackblitz.com/edit/js-xngbem (смотрите консоль)

Answer 3

[Aetae]

Ответ конкретно на вопрос: document.activeElement.
Конкретные же решения предложили и без меня.)