Steve Breese

A Chicago-based full stack web developer with a passion for user experience

Observable Field.js



<script src="js/jquery.js"></script>
<script src="js/jQuery.ObservableField.js"></script>
  $(function() {
    // Executes a callback detecting changes with a frequency of 100 milliseconds (tenth of a second)
    $("input").ObservableField(100, function( ) {
      // Display change and then fade out after a few seconds if the user has stopped typing
      if (inDelay == false) {
                 .html('Input change observed! New value: ' + this.value )
                 .animate({},0,function() {
                    inDelay = true;
                  }) // END animate
                      inDelay = false;
                   }); // END animate
    $("select").ObservableField(100, function( ) {
      alert('Select change observed! New value: ' + this.value );

      <label for="item1">Item 1:</label>
      <input type="text" id="item1" value=""> <span id="msg"></span>
      <label for="item2">Item 2:</label>
      <select id="item2" >
        <option value="JavaScript">JavaScript</option>
        <option value="PHP">PHP</option>
        <option value="Node.js">Node.js</option>
        <option value="MongoDB">MongoDB</option>


This is a jQuery plugin that implements a way to observe form fields on a near real-time frequency, instead of having to rely on blur (too cumbersome for the user) or keyup (does not account for pasting of values or programmettically entered values).