Control & Monitor User Typing with The typingEvents jQuery Plugin

typingEvents is a tiny yet powerful jQuery plugin that provides granular control over input events like key presses. Can be used to monitor and manipulate user typing behaviors.

It tracks keydown, keyup, typing start, and typing end events in your input fields without overwriting default behavior. You can get the currently pressed key and fire events on specific keys.

How to use it:

1. Download and import the jquery-typingEvents.min.js script into your webpage.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery-typingEvents.min.js"></script>

2. Initialize the plugin on your input field and handle key presses using the following callback functions.

<input type="text" id="example" autocomplete="off" />

const input = $('#input_example_1');
input.typingEvents({
  onKeyDown(event, key, allowed) {
    // do something
  },
  onKeyUp(key) {
    // do something
  },
  onPrevented(key) {
    // do something
  },
  onTypingStart() {
    // do something
  },
  onTypingEnd(value) {
    // do something
  }
})

3. Restrict or allow specific inputs to ensure that users are entering valid and expected characters.

input.typingEvents({
  allowedKeys: ['a', 'A'],
  preventedKeys: ['b', 'B'],
})

4. Set the delay in milliseconds. Default: 400ms.

input.typingEvents({
  delay: 200,
})

5. The plugin allows you to automatically remove specified characters from the input field once the TypingEnd event is triggered.

input.typingEvents({
  trim: ".,|]\\^",
})

6. Available events.

input.on('key.b', function(e, key, allowed){
  // key.B
  // key.a
  // key.CapsLock
  // key.any
  // key.prevented
  // ...
})

input.on('typingStart', function(e){
  // do something
})

input.on('typingEnd', function(e, value(trimmed)){
  // do something
})

---

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