Enable Slash Commands On Text Fields - jQuery Slasher
File Size: | 35.4 KB |
---|---|
Views Total: | 725 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Slasher is a jQuery plugin that makes it possible to enable slash commands on any text field.
After creating custom commands, you will see a list of matched slash commands when you type a forward slash /
plus a keyword in a text field.
Supports both textarea and input elements. Requires Caret.js library.
See also:
- Twitter Like @Mentions Auto Suggesting Plugin with jQuery - Bootstrap Suggest
- Colorfy #Tags And @Mentions In An Editable Content - jQuery autotag
- Facebook-like @mention Autocomplete Plugin With jQuery - mentiony
- Customizable jQuery @Mentions And #Tags Plugin - mentions-kinder.js
- jQuery Plugin To Generate Links For URLs, Mentions and Hashtags - Linky
- Twitter & Facebook Like Mention Input Plugin with jQuery
How to use it:
1. Download the plugin and place the jquery.slasher.js
script after jQuery and Caret.js libraries.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery.caret.min.js"></script> <script src="/path/to/jquery.slasher.js"></script>
2. Create an array of commands as follows:
const myCommands = [ { command: 'Command 1', description: 'Command 1', callback: function1 },{ command: 'Command 2', description: 'Command 2', callback: function2 },{ command: 'Command 3', description: 'Command 3', callback: function3 }, ], function function1(element, commandInfo) { console.log('Action 1') } function function2(element, commandInfo) { console.log('Action 2') } function function3(element, commandInfo) { console.log('Action 3') }
3. Attach the Slash Command plugin to your text field and done.
<textarea id="example"></textarea>
$('#example').slasher({ items: myCommands });
4. Customize the styles of the command list. In this example, we're going to uses Bootstrap to style the slash command plugin.
<!-- OPTIONAL --> <link rel="stylesheet" href="/path/to/bootstrap.min.css" />
$('#example').slasher({ items: myCommands, cssClasses: { dropdownListClasses: 'dropdown-menu', dropdownListItemClasses: 'dropdown-item d-flex flex-column ', dropdownActiveItemClasses: '', commandClasses: 'font-weight-bold text-primary', descriptionClasses: 'text-muted ' } });
5. Determine the z-index of the command list. Default: '10000'
$('#example').slasher({ items: myCommands, zIndex: '999' });
This awesome jQuery plugin is developed by SocialBu. For more Advanced Usages, please check the demo page or visit the official website.