title: Code Event Listener for form text fields when value changes?
body: <p>I have an html form with seven text fields. I need a Javascript event listener to listen for any change in value from the default value. The event listener needs to fire a function called format() no matter whether text is pasted, dropped or typed. How would I do this?</p>
  
  <p>Below is the html form:</p>
  
  <pre><code>&lt;form class="right_aligned" name="form" method="get" action="" id="form" &gt;
  
  &lt;div style="float: left;"&gt;&lt;input ondblclick="this.value=''" type="text" name="publication" value="Publication..." id="publication" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"
  ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}"     onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left;"&gt;&lt;input ondblclick="this.value=''" type="text" name="title" value="Article Title..." id="title" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left"&gt;&lt;input ondblclick="this.value=''" type="text" name="author" value="Author..." id="author" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left;"&gt;&lt;input ondblclick="this.value=''" type="text" name="credentials" value="Credentials..." id="credentials" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left"&gt;&lt;input ondblclick="this.value=''" type="text" name="date" value="Date..." id="date" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left;"&gt;&lt;input ondblclick="this.value=''" type="textarea" name="evidence" value="Evidence..." id="evidence" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;div style="float: left;"&gt;&lt;input ondblclick="this.value=''" type="text" name="tagline" value="Tagline..." id="tagline" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
  onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"&gt;&lt;/div&gt;
  
  &lt;input class="button" type="reset" value="Clear Form" onClick="clearForm()" style="margin:5px 5px 5px 10px;float:left"&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>By the way, the event listener code only has to work in Firefox.</p>