Terminal-style Blinking Cursor Plugin With jQuery - Custom Caret

This is a jQuery plugin that lets you create a custom, CSS3 animated, Terminal-like caret to replace the boring mouse cursor in your editable element.

How to use it:

1. Load the jQuery Custom Caret plugin's JavaScript file after the latest jQuery JavaScript library (slim build is recommended).

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="jquery.custom-caret-1.1.js"></script>

2. Call the plugin on the editable element.

<div id="demo" contenteditable="true">Custom caret is here.</div>

$("#demo").customCaret();

3. Style & animate the custom caret in the CSS as follows:

#caret {
  border-right: 0.5em solid var(--text);
  margin-right: -0.5em;
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes 
  blink-animation {  to {
    visibility: hidden;
  }
}

---

This awesome jQuery plugin is developed by apm1467. For more Advanced Usages, please check the demo page or visit the official website.