https://github.com/hardeepasrani/contenteditablecaret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in a contentEditable element.
https://github.com/hardeepasrani/contenteditablecaret.js
caret-position contenteditable npm npm-package
Last synced: 3 months ago
JSON representation
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in a contentEditable element.
- Host: GitHub
- URL: https://github.com/hardeepasrani/contenteditablecaret.js
- Owner: HardeepAsrani
- License: mit
- Created: 2018-07-08T21:12:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-09T11:51:48.000Z (almost 7 years ago)
- Last Synced: 2025-02-18T08:40:19.326Z (3 months ago)
- Topics: caret-position, contenteditable, npm, npm-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/contenteditablecaret
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# contentEditableCaret.js
contentEditableCaret.js is a lightweight JavaScrpt plugin to allow you to move the caret (or cursor) position in a contentEditable element.
You can set the caret position in your contentEditable element by providing the string.
```
Neighbors bring food with death and flowers with sickness and little things in between. Boo was our neighbor. He gave us two soap dolls, a broken watch and chain, a pair of good-luck pennies, and our lives. But neighbors give in return. We never put back into the tree what we took out of it: we had given him nothing, and it made me sad.
Focus
const element = document.getElementById( 'content' );
function onClickButton(){
contentEditableCaret( element, 'Boo', true, false );
}
```
## `contentEditableCaret( el, text, order = true, index = true, firstChild = true )`
`contentEditableCaret()` function accepts five arguments:
* `{object} el` - Element to be search for.
* `{string} text` - Text that needs to be looked for.
* `{boolean} order` - Wheather to search for the first or last occurrence of the text.
* `{boolean} index` - Wheather to search for the beginning or end of the text.
* `{boolean} firstChild` - Wheather to search for the first occurrence or the last in nested elements.
## Including contentEditableCaret.js
Below are some of the most common ways to include contentEditableCaret.js
### npm
To include in Node, first install with npm.
```npm install contenteditablecaret```
After that, you can include it using:
```import contentEditableCaret from 'contenteditablecaret';```
### Browser
```
var exports = {};
```
## License & Attribution
MIT © [Hardeep Asrani](http://www.hardeepasrani.com/).
This project is inspired by a night's worth of frustration on not finding an elegant solution. If it saves you some frustration, you can donate to the author from [here](http://www.hardeepasrani.com/donate/).