 |
| Highlight Text In Text Fields Plugin For jQuery (Images: Plugin JS) |
highlightTextarea is a jQuery plugin which allows you to highlight words and sentences inside of <textarea> and <input> elements. Words are defined in a jQuery array and you can customize highlight color and case sensitivity. The highlighting updates itself when typing in the <textarea> and follows scroll and resizing (with jQuery-UI).
How to use it:
1. Make sure to load the jQuery highlighttextarea plugin after jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.highlighttextarea.js"></script>
2. Call the plugin and create an array of words you want to highlight.
$('#demo').highlightTextarea({
words: {
color: '#ADF0FF',
words: ['word1','word2']
}
});
3. Available options to customize the plugin.
$('#demo').highlightTextarea({
// Either an array of words to highlight (can be regular expressions) or an array of objects
words: {
// color of this subset of words
color: '#ADF0FF',
// array of words to highlight
words: ['Word1','Word2']
},
// Either an array of indexes pairs (start, end) or an array of objects
ranges: [{
// color of this subset of ranges
color: '#ADF0FF',
start: 0,
length: 5
}, {
color: '#FFFF00',
// array of indexes pairs
ranges: [[6, 11], [40, 55]]
}],
// Color used if words is an array of words or if ranges is an array of pairs.
color: '#ffff00',
// Set to false to make case insensitive words match
caseSensitive: true,
// Should the textarea be resizable (requires jQueryUI Resizable)
resizable: false,
// Identifier to add to the textarea container,
// don't use this parameter when initializing multiple textareas at once
id: '',
wordsOnly: false,
debug: false
});
Live Demo
See the Pen Highlight Text In Text Fields Plugin For jQuery - highlightTextarea by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- highlight-text-in-text-fields-plugin-for-jqueryhighlighttextarea.zip
- Size :
- 15.98KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT