onFocus and onBlur work, onChange does not. Why is that?

JavaScript
1

Hi,

I am trying to pass a value from one field to another, real-time. But onChange does not work here, while onFocus and even onBlur do. Why is that, or how else can I pass a value real-time?


<!doctype html>
<head>
<script>
function passText(str)
{
    document.testForm.secondField.value = str;
}
</script>
</head>
<body>
    <form name=testForm action="">
        <input type=text name=firstField size=10 value="" onChange="passText(this.value);" />
        <input type=text name=secondField size=10 value="" />
    </form>
</body>
</html>

[Edit: I found it: it is a structural property of onChange that one has to navigate out of the object for it to take effect. See http://msdn.microsoft.com/en-us/library/ms536912(v=vs.85).aspx. And onBlur will do the job as well.]

2

You can also use keyup as well:
jsFiddle


<!DOCTYPE html>
<html>
	<body>
		<form name="testForm">
			<input type="text" name="firstField" value="" />
			<input type="text" name="secondField" value="" />
		</form>
		<script>
			var frm = document.testForm,
				passValue = function(fromEl, toEl) {
					fromEl.onchange = function() {
						toEl.value = fromEl.value;
					};
					fromEl.onkeyup = function() {
						toEl.value = fromEl.value;
					};					
				};
			passValue(frm.firstField, frm.secondField);
		</script>
	</body>
</html>
3

I can’t get onkeyup to work in IE7 (other versions not checked), but with onfocus for the second field, assuming the value of the first field, the module is working fine now.

Thanx for the tip, though.