jQuery Plugin For Input Field Position Indicator

A smart and dynamic plugin for jQuery and Zepto that creates an animated underline in an input field to indicate the current cursor position and how much text is occupying it. The plugin is smart that will only show the position indicator if text of input field is being overflowed.

How to use it:

1. Include jQuery javascript library or Zepto javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include the plugin on your web page, after jQuery library.

<script src="app.js"></script>

3. Create an input field.

<input type="text" />

4. The sample CSS for the input field and the position indicator.

input {
padding: 7px;
margin: 20px;
width: 300px;
font-size: 26px;
border-radius: 5px;
background-color: rgba(0,0,0,0.5);
border: 0;
color: #FFF;
box-shadow: 0 1px 1px rgba(255,255,255,0.4), 0 -1px 0 rgba(0,0,0,0.7), 0 0 15px 2px rgba(255,255,255,0.5);
background-image: linear-gradient(0deg, #B4DB4A 100%, transparent 0%);
background-image: -webkit-linear-gradient(0deg, #B4DB4A 100%, transparent 0%);
background-repeat: no-repeat;
background-position: 0 100px;
-webkit-transition: 0.2s;
transition: 0.2s;
}

5. Call the plugin and custom the background postion of the indicator.

<script>
$('input[type=text]').inputIndicator({
bgPos:'30px'
});
</script>

---

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