Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

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

About

A jQuery plugin for customizing the caret (text cursor) on web pages

Resources

License

Releases

No releases published

Packages

No packages published