jQuery Custom Caret

A jQuery plugin for customizing your caret (text cursor) using CSS.

A demo page is here.

Tutorial

See example/example.html for a full example.

1. Make a contenteditable element, e.g. a <div>:

   <div id="demo" contenteditable="true"></div> 

2. Apply custom caret on it:

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

3. Add CSS:

   #demo { 	/* Set text color to transparent to hide the default caret */ 	color: transparent;  	/* Use text-shadow to make text visible */ 	text-shadow: 0 0 white; }  /* Customize the look of your caret */ #caret { 	border-right: 0.5em solid white; 	margin-right: -0.5em; 	animation: blink-animation 1s steps(2, start) infinite; } @keyframes blink-animation { 	to { 		visibility: hidden; 	} } 

Usage

$("yourContentEditableElement").customCaret({ 	caretID: _caretID_, 	callback: _callbackFunction_ }); 

A <span id= _caretID_ ></span> element will be insert into the contenteditable element as your custom caret. You can adjust the look of it using CSS.

The default ID is #caret. You can also give your own ID:

$("#demo").customCaret({caretID: "myCaret"}); 

Limits

This implementation:

• Does not handle line break
• Does not work in Microsoft Edge