smart input field position indicator

I played a little with JS today and had an idea: for a given input field, it would be cool to indicate the current cursor position and how much text is occupying it. I also wanted it to be easy to implement in any website without modifying the DOM at all. So I've made a jQuery plugin.


Why smart?

  • No images, pure CSS rendering
  • No extra DOM needed
  • Supports text selection direction (which isn't so trivial to achieve).
  • Accurate & dynamic, which means you can add or remove text and it will adapt.
  • Will only show if text is being overflowed
  • Uses Event-Delegation so don't worry about performance if you have a million input fields or dynamically-created ones

Mind that if you're changing the font-size and height of the input field you would also probably need to play a bit with the 'background-position' in the plugin's settings. You can also be creative and play with the CSS settings to change the way the indicator looks.


Settings and stuff


// initialize
$('input:text').inputIndicator();

// initialize with setting the 'background-position'
$('input:text').inputIndicator({ bgPos:'31px' });

// destroy
$('input:text').inputIndicator('destroy');
Check out this Pen!

Demo playground