Question

我有一种情况，我希望能够分离一些输入元素（包括具有焦点的元素）并将它们重新放在别处。这将不可避免地导致焦点在这些元素中丢失。在Chrome中，我可以使用.focus（）将焦点设置回输入元素。在IE中，我无法做到。在IE中调用focus（）之后，document.activeElement是输入控件...而$（＆＃39;：focus＆＃39;）也表示输入控件具有焦点...但是在控件中键入的任何新文本都会没有出现。在Chrome中似乎模糊了＆＃39;在detach（）上自动调用。在IE中它不是。

在detach（）之前直接在具有焦点的输入元素上调用blur（）会导致在IE中的该元素上调用blur（）两次...但在Chrome中只调用一次。这将允许我调用.focus（）。以下JSFiddle说明了这一点。

http://jsfiddle.net/7qzEk/19/

<div>
    <input id="a" type='text' placeholder="detach, append, focus"/>
    <input id="b" type='text' placeholder="blur, detach, append, focus"/>
</div>
<textarea id="log" cols="50" rows="20"></textarea>
<button id="clear">Clear all</button>

$(document).ready(function () {
    var log = function(message) {
        $('#log').val($('#log').val() + message + "\n");
    }

    // detach input on keyup, then reappend it and set focus on it. 
    // This doesn't set focus correctly in IE
    $('#a').keyup(function () {
        var inputA = $('#a');
        var parent = inputA.parent();
        var children =  parent.children();
        children.detach();
        parent.append(children);
        inputA.focus();
    });

    /// blur, then detach input on keyup, then reappend it, then focus it. 
    // Works correctly in IE
    $('#b').keyup(function () {
        var inputB = $('#b');
        inputB.blur();
        var parent = inputB.parent();
        var children =  parent.children().detach();
        parent.append(children);
        inputB.focus();
    });

    /// log blur events
    $('#a').blur(function () {
        log("a - blur");
    });
    $('#b').blur(function () {
        log("b - blur");
    });

    // clear everything
    $('#clear').click(function () {
        $('#log').val("");
        $('#a').val("");
        $('#b').val("");
    });
});

注意：这不是我的实际情况，它只是说明了分离然后尝试在追加后设置焦点的问题。

有没有更好的方法来移动这些元素，以便在浏览器中保持一致的焦点？

Answer 1

不幸的是，Microsoft拒绝在Internet Explorer 11及之前修复此问题。如果Edge做出正确反应你会很幸运，当然强迫所有用户升级都会很有趣......

在分离和重新附加IE11时，输入元素不能正确保持焦点

1 个答案: