textarea-selection-bounds

Easily get the bounds of a selection in a textarea or text input element.

Motivation 💥

textarea-selection-bounds is a simple library that allows you to get the bounds of a selection in a textarea or text input element. It is written in TypeScript and has no dependencies. It is perfect to overlay content on top of a textarea or text input element that should follow the selection.

top & left are the coordinates of the top-left corner of the selection. They are relative to the window (fixed). width & height are the dimensions of the selection.

⚠️ Caution ⚠️: If you want to style an element that follows the selection, make sure to set the position of the element to fixed and use the top and left values from the bounds object.

Demo 🚀

See the Codepen for a live demo.

Features 🔥

✅ Get top, left, width, and height of a selection in a textarea or text input element.

✅ Zero dependencies.

✅ Strongly typed.

Built With 🔧

• TypeScript

Installation 📦

pnpm i textarea-selection-bounds
// or
yarn add textarea-selection-bounds
// or
npm i textarea-selection-bounds

Usage Example 🚀

import { TextareaSelectionBounds } from "./textarea-selection-bounds";

const textArea = document.querySelector('textarea');
if (textArea) {
  const bounds = new TextareaSelectionBounds(textArea);
  console.log(bounds.getBounds());
}

Contributing 🧑🏻‍💻

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License 🔑

Distributed under the MIT License. See LICENSE.txt for more information.

Contact 📧

Janik Schumacher - @LoaderB0T - linkedin

Project Link: https://github.com/LoaderB0T/textarea-selection-bounds