PDA

View Full Version : Enter key while input has focus fires unrelated button click



simeon
21 Mar 2007, 9:48 AM
I am getting wierd behavior when hitting enter key while a form input has focus.
It causes a button in a seperate part of the document to fire its click handler. In my case it opens dialog. It happens in every input on the page. It doesn't happen in text areas.
Very weird. There is nothing in my code that connects the inputs to the button.
I get no javascript errors.
It only happens in Firefox. Doesn't happen in IE7.

My html:


<table cellspacing="0" cellpadding="0" border="0" class="af-form-table" style="width:100%;">
<tr>
<td><label id="af_caption_label" class="af-form-label" for="af_caption_form">Message Summary</label></td>
<td><input autocomplete="OFF" tabindex="1" name="af_caption_form" id="af_caption_form" class="af-width-fill" type="text" value="" /></td>
</tr>

<tr id="teamAccessRow">
<td><div id="teamAccess_btn"></div></td>
<td><div class="af-formBtn-value" id="af_teamAccess_div"><div>Global Team</div></div></td>
</tr>
</table>




var teamAccessBtn= new Ext.Button('teamAccess_btn',{cls:'af-formBtn',minWidth:'120',text:'Team Access ...'});
teamAccessBtn.on('click', TeamSelector.showDialog);

jack.slocum
21 Mar 2007, 12:00 PM
That is very odd indeed. Maybe the enter key is triggering a form submit which FF automagically associates with the button element? Is there a form?

simeon
21 Mar 2007, 12:03 PM
yes. here is the form tag:


<form class="af-form" id="editMessage-dlg-bd" onsubmit="return false;" action="" enctype="multipart/form-data"></form>


It all takes place in a dialog incase that matters.

jack.slocum
21 Mar 2007, 12:07 PM
Try adding this listener on the form and see if it fixes the problem. It will give us an idea of what is happening:


Ext.get('af-form').on('keydown', function(e){
if(e.getKey() == e.ENTER){
e.preventDefault();
}
});

simeon
21 Mar 2007, 12:42 PM
That seems to have fixed the problem.
Thanks.

DrZog
27 Apr 2007, 1:18 AM
I found that you need to use 'keypress' not 'keydown' to get FF to work...

ie.


Ext.get('af-form').on('keypress', function(e){
if(e.getKey() == e.ENTER){
e.preventDefault();
}
});

It's not always IE :D