javascript - 浏览器渲染元素时的事件或回调

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();  
}

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

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

标签： javascriptinternet-explorer

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键后会新增一个文本框并设置焦点）：