Handle Caret Position Change Event In Input Field - jQuery caretchange

File Size: 2.62 KB
Views Total: 861
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Handle Caret Position Change Event In Input Field - jQuery caretchange

The caretchange jQuery plugin provides a caretchange event which can be used to handle the caret change data in an input field you specify.

How to use it:

1. Download and insert the caretchange.js JavaScript file after loading jQuery.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="caretchange.js"></script>

2. Attach the caretchange event handler to the input field and done.

<input>
$('input').on('caretchange', function(e) {

  // e.caretchangeData

});

3. This will return a JS object of caret change data as follows:

  • currentSelStart: start position
  • currentSelEnd: end position
  • prevSelStart: last start position
  • prevSelEnd: last end position
{
  currentSelStart: 18,
  currentSelEnd: 18,
  prevSelStart: 15,
  prevSelEnd:15
}

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