Maybe the solution would be something along the lines of the following snippet:
<form>
<input type="text" onkeypress="alert('keypress' + event);event.preventDefault();"/>
<input type="image" src="calendar_icon.png" onclick="alert('image button clicked.' + event);"/>
</form>
If you run it and press enter on the text field, you'll see that the onclick event of the image input won't be fired.
I noticed that when you have a text field and an image input on the SAME form and you press enter on the text field, two distinct event objects will be created by the browser: one for the keyboard event on the text field and one mouse event for the image input. For some reason the browser is creating this mouse event, and this happens in all major browsers. Also, if you have two or more image inputs on the same form with an onclick event, only the event of the first image input will be fired.
So, we could try using the onkeypress event on the text field and check to see if it's the enter key, and then call event.preventDefault(). In IE 7/8, we would have to do "window.event.returnValue = false;", since the event object there doesn't have the preventDefault() method. Calling event.stopPropagation() doesn't work because the browser creates two distinct event objects.
This is a known behavioral problem in browsers. Whenever you press ENTER in an input field, the image button just "steals" the event, which is the same as a click on the image button. See screenshot-01 and -02 for example cases.
Verified by creating a simple HTML page. The markup is just this:
<form>
<input type="text"/>
<input type="image" src="cal_button.gif" onclick="alert('image button clicked.');"/>
</form>
See what happens: http://screencast.com/t/GShPjqqIo42y.