Question 213287 in Html Question posted in
Some basic documentation can be found here.

how to change focus back to textarea in HTML

I have HTML code to load an audio and write something about it, like this

<body>
<audio id="audio-player" controlsList="nodownload" controls src="1294.wav" oncontextmenu="return false;"
    onkeydown="return false;">
    Your browser does not support the audio element.
</audio>

<form>
    <input type="hidden" name="sysid" id="sysid-field">
    <textarea name="status" id="input_tr" autofocus></textarea>
    <button type="submit" value="ok">OK</button>
</form>

I want to when user click on play or pause or any where on audio player the focus go back to textarea

Used this code but its not working for audio tag

const textarea = document.getElementById("input_tr");

document.body.addEventListener("click", function () {
    // Set focus on the textarea element when the user clicks anywhere on the page
    textarea.focus();
});
Tags:

2

Answers


  1. 0

    Try using focus event on audio element

    const textarea = document.getElementById("input_tr");

document.querySelector('#audio-player').addEventListener("focus", function() {
  textarea.focus();
});
    <audio id="audio-player" controlsList="nodownload" controls src="https://github.com/prof3ssorSt3v3/media-sample-files/raw/master/jimmy-coffee.wav" oncontextmenu="return false;" onkeydown="return false;">
  Your browser does not support the audio element.
</audio>

<form>
  <input type="hidden" name="sysid" id="sysid-field">
  <textarea name="status" id="input_tr" autofocus></textarea>
  <button type="submit" value="ok">OK</button>
</form>
    Login or Signup to reply.
  2. 0

    HTML

    <audio id="myAudio" controls>
  <source src="https://www2.cs.uic.edu/~i101/SoundFiles/ImperialMarch60.wav" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<textarea id="myTextarea"></textarea>

    Javascript

    const audioPlayer = document.getElementById('myAudio');
const textarea = document.getElementById('myTextarea');

audioPlayer.addEventListener('play', () => {
  textarea.focus();
});

audioPlayer.addEventListener('pause', () => {
  textarea.focus("false");
});


audioPlayer.addEventListener('click', () => {
  textarea.focus();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search