Small library for highlighting bits of text within a textarea.
It's not actually possible to style text in a textarea, because any markup within a textarea is treated as literal text. This plugin aims to fake it, allowing you to highlight pieces of text inside a textarea.
A native textarea element is used and familiar behavior (auto-correct, scrolling, resizing, etc.) works as expected.
To start, call highlightWithinTextarea(), passing in a textarea and a config object.
const highlighter = new HighlightWithinTextarea(myTextarea, {
highlight: whatever // string, regexp, array, function, or custom object
});The highlight property accepts several different types of values to describe what will be highlighted.
The jQuery version has a demo page with some sample styling (view source to see the CSS). The configuration is exactly the same for this jQuery-free version.
There are some guidelines for getting your styles in the right places. Here are the classes you'll want to use.
Use for visibility, positioning, and background.
displaypositiontopleftmarginbackground
Use for sizing and text formatting.
widthheightpaddingbordercolorfont
Use for highlighted text. Generally, stuff that doesn't change size is fine.
background-colorborder-radiusbox-shadow
Changes to color won't be visible, since text in the textarea covers colored text in the highlights.
Highlighting will automatically be updated as the user edits the contents of the textarea. But sometimes other scripts may directly change the contents of the textarea. In these cases, you can manually trigger a highlighting update.
highlighter.handleInput()