Question

我有一张包含多个单元格和一个输入元素的表。输入元素位于其中一个单元格中。通过按Tab键，我将输入从一个单元格移动到另一个单元格。在此操作结束时，我需要将焦点设置为输入。

在chrome浏览器中，一切正常。在IE中，除了最后一部分（焦点）之外，其他所有东西都工作正常。好像是由于我在设置输入元素尚未渲染的焦点时IE中的渲染较慢。

function goNext(){
  var input = $('input');
  var td = input.parent();
  var all = $('table td');
  for(var i = 0; i < all.length; i++){
    if (td[0] === all[i]){
        if (i === 3){
          all[0].appendChild(input[0]);
        } else {
          all[i+1].appendChild(input[0]);
        }
    }
  }  
  input.focus();  
}

如果我将input.focus用100毫秒包装到setTimeout中，则可以正常工作，但是我认为这不是正确的方法。

有什么方法可以知道渲染何时完成？我已经尝试过MutationObserver，但是它不适用于整个表，并且我不想观察每个单元格。这是demo来说明问题的地方。

Answer 1

请尝试使用以下代码：

<table>
    <tr>
        <td><input type="text" class="txtbox" /></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<script>
    $(function () {
        $(".txtbox")[0].focus();
        //clone the textbox 
        var itemtemp = $(".txtbox")[0].outerHTML;
        //current focus textbox number.
        var currentactive = 0;

        $('table').keydown(function (e) {
            if (e.keyCode === 9) {
                console.log('tab pressed');
                AddTextBox();
                goNext();
                e.preventDefault();
                e.stopPropagation();
            }
        });

        //focus to next texbox 
        function goNext() {
            var input = $('.txtbox');
            currentactive++;
            input[currentactive].focus();
            if (currentactive ==3) {
                currentactive = -1;
            }
        }

        var tdcount = $('table td').length;
        //add textbox 
        function AddTextBox() {
            if (currentactive < tdcount && $("table td")[currentactive + 1].innerHTML == "") {
                console.log("add new textbox");
                $("table td")[currentactive + 1].innerHTML = itemtemp;
            }
        }
    })
</script>

结果如下（使用IE 11浏览器，单击Tab键后，将添加一个新文本框并对其进行设置）：

浏览器呈现元素时的事件或回调

1 个答案: