Question

我有一个很长的表，我在其中使用搜索框来搜索表格行。 .focus()函数将焦点设置在表格行元素上，但会立即跳回到搜索框并将焦点设置到它。我不知道为什么会这样。

<ice:inputText value="#{bean.searchStr}" maxlength="8" size="8" 
                                  onkeyup="enterToSearch(event, this.id);"/>
.....
<ice:commandLink actionListener="#{bean.search}"></ice:commandLink>

function focusSelectedRow(rowId) {
    // Using some other element's id to get to the tr element 
    // and rowId does not correspond to the actual table row
    var rowElem = document.getElementById(rowId);
    var trElem = rowElem.parentNode.parentNode.parentNode;
    var tableElem = trElem.parentNode.parentNode;
    var children = trElem.parentNode.childNodes;
    var rowNum = 1;
    var rowHeight = trElem.offsetHeight;
    for (var i=0 ; i < children.length ; i++) {
        if(children[i] == trElem) rowNum = i+1; 
    }
    trElem.tabIndex = 999;
    trElem.style.backgroundColor = '#FFFF00';
    trElem.focus();
    // The below is used because, if the scroll bar is manually adjusted the focus 
    // is not retained for the next search
    tableElem.scrollTop = rowNum*rowHeight;
}

function enterToSearch(event, id) {
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if(keyCode == 13)
    {
        document.getElementById(id).parentNode.parentNode.childNodes[3].childNodes[0].click();
    }
}

Answer 1

解决方案是在.focus()函数

之后添加以下行

trElem.scrollToIndex();

在设置之后，焦点在表行元素上丢失

1 个答案: