Is there a way to avoid holding the ALT key when c

2019-09-10 07:54发布

问题:

I have a SAPUI5 table which contains input fields. I have prepared an example at http://jsfiddle.net/bgerth/x8h92mz8/.

When you press ALT+TAB you can cycle through the input fields within the table (I only found that out by looking at sap.m.ListBase.prototype._startItemNavigation). Only pressing TAB focuses the first element outside the table.

I consider that rather non-intuitive. Is there a way to make TAB alone work the same way?

Update:

Alt+Tab works in Chrome and Safari, but not Firefox (45.0.2) on my Mac. It doesn't work at all on Windows, as that combination is reserved to toggle through open application windows.

回答1:

There are two solutions I discovered so far to address this problem

Proposal 1: Adapt tab key handling

I have found the blog SAPUI5 Table Navigation with Tab Key by Klaus Kronawetter which adds extra keyboard handling to a sap.ui.table.Table. I adapted his code for a sap.m.Table which you can find at http://jsfiddle.net/bgerth/os6r096y.

Unfortunately, the code is rather lenghty.

Proposal 2: Enable up/down arrow keys

After further investigation, I decided that the solution from proposal 1 above is too much hassle.

Instead, I adapted the class sap.ui.core.delegate.ItemNavigationmentioned above, which is internally employed by sap.m.ListBase. In essence, you can cycle through the input fields with up and down arrow keys.

I have prepared an example at http://jsfiddle.net/bgerth/0r9L30wd. The relevant code is

var fnPatchedItemNavigationsetItemDomRefs = sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs;
sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs = function setItemDomRefsPatched(aItemDomRefs) {
    // 'this' is now the instance of sap.ui.core.delegate.ItemNavigation
    jQuery.sap.log.debug("Patched version of sap.ui.core.delegate.ItemNavigation.setItemDomRefs");
    var aInputFields = $(aItemDomRefs).find("input:enabled").get();
    if (aInputFields[0]) {
        // There is at least one enabled input field in this table
        return fnPatchedItemNavigationsetItemDomRefs.call(this, aInputFields);
    } else {
        return fnPatchedItemNavigationsetItemDomRefs.call(this, aItemDomRefs);
    }
}