Proper handling of input change event
<p>It may be a correct behavior of change event, but the below behavior is bit annoying. When the value is updated from the field history (see explanation below), the event is not triggered.</p>

<p>Please see example code below. the result input field is updated with the change in input field 'input1'. The form and submit button is not fully relevant, but needed to submit a form to make the browser keep the history of field values.
To test:</p>

<ol>
<li>enter any input in the field (say ABC)</li>
<li>Submit the form</li>
<li>enter first character of input from 1 (A)</li>
<li>use the down arrow to select the previous value + Enter</li>
<li>or use the mouse to select the previous value from the history
No input change is detected.</li>
</ol>

<p>Which event/ how should this code should modify so that an event is generated whenever the input value is changed.</p>

<p>thanks.</p>

<hr>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    Result:&lt;input type="text" id="result" readonly&gt;&lt;/input&gt;

    &lt;form method="post" action=""&gt; 
        &lt;input type="text" id="input1" /&gt;   
        &lt;button type=submit&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    &lt;script &gt;
        $(document).ready(function() {          
            $('#input1').change(
                function(){
                $('#result').val($('#input1').val());
            });      
        }); 
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
