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

Html – How can I detect selection changes in a textarea using JavaScript?

I’m trying to detect selection changes within a textarea element on my webpage. I attempted to use the selectionchange event, but it doesn’t work:

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

textarea.addEventListener('selectionchange', (e) => {
    console.log(e);
});
body {
    padding: 20px;
}

textarea {
    width: 100%;
    height: 50px;
}
<textarea id="myTextarea">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationemLorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationem
</textarea>

This code doesn’t trigger the event when I change the selection inside the textarea. How can I correctly detect selection changes within a textarea?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is a simple way to solve the problem:

    document.addEventListener("selectionchange", (e) => {
  if (document.activeElement === textarea) {
    console.log(e);
  }
});

    Full code:

    const textarea = document.querySelector('textarea')
document.addEventListener("selectionchange", (e) => {
   if (document.activeElement === textarea) {
     console.log(e);
   }
});
    <textarea>Some text that's a little bit loooooonnnnnngggggg.</textarea>


  2. 0

    I can offer you 2 options:

    Tracks text changes when the user leaves the textarea field:

    textarea.addEventListener("input", function() {
  const inputText = textarea.value;
  console.log(inputText);
});

    Triggers on any change inside the textarea:

    textarea.addEventListener("input ", function() {
    console.log(this.value);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search