PDA

View Full Version : Keep inside form when tabbing - how?



gartner
25 Feb 2015, 10:36 AM
I have a form that opens inside an Ext.window.MessageBox.
The form has some fields, and a toolbar at the bottom with an 'Ok' and a 'Cancel'-button.

When the form opens, focus is placed in the first input-field.
If i press the TAB-key, it correctly advances to the next field. Keep pressing TAB and I reach the first button in the toolbar.

But then if I press TAB again,focus goes to the browsers address-field. I would very much like it to go back to the first input-field of the form. Is that possible?

-mads

glopes
25 Feb 2015, 9:36 PM
You can use the blur listener and the focus method together to get this to work...



buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
},listeners : {
blur : function (field, event) {
var form = field.up('form');
if(event.forwardTab === true) {
Ext.defer(function(){
form.down('field').focus();
},10);
}
}
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
},
listeners : {
blur : function (field, event) {
var form = field.up('form');
if(event.forwardTab === true){
Ext.defer(function(){
form.down('field').focus();
},10);
}
}
}
}]


ir0

gartner
26 Feb 2015, 11:39 AM
Thanks, this was what I was thinking ...However, in my case, this doesn't really work. My form is opened in a modal window. If the first (of two) buttons in the toolbar has focus, and i press , the first field in the form is sort of selected. All the text in it gets selected.... but focus still moves to the browsers address-bar.If the second button in the toolbar is selected, a press on does nothing! (but moving back and forth between the two toolbar-buttons, I can se that the blur-method is actually called).

gartner
26 Feb 2015, 12:16 PM
I see some of the same problems in your revised fiddle.If I enter nothing in the two textfields, just tabs through them, then when the 'Reset'-button receives focus, nothing happens on .If I enter text in the fields, the submit-button gets activated, but when it has focus, tabbing does nothing. +

glopes
26 Feb 2015, 12:36 PM
For some reason when you add the modal : true config to the Window, the tab key doesn't take the focus out of the button.
So I removed the blur listener and added a keyDown listener to document.body, checked for an event from a button with class 'modal-button' that was manually added...

Seems to be working... (Only tested with Chrome)

gartner
26 Feb 2015, 11:15 PM
This worked a lot better. But still not perfect: If second button is active, tab goes to first element in the form as it should. But if first button is active, tab goes to the browsers address-field, but still selects the text in the first form-field.I tried a lot, but could not figure out why it is like so. For now, it is working "good enough" for me. Thanks for helping.-mads