IE - 隐藏和显示输入时重新显示输入时不会获得焦点

Question

我想根据用户是否注意输入来切换输入的可见性。我想允许用户能够编辑输入，当他们离开时，我想在输入中显示他们刚刚编辑的位置，这将“编辑”编辑后的输入。

在我的情况下，我有两个输入元素。当用户离开“数值”输入时，“显示”输入应显示。用户下一次给出“显示”输入焦点时，应该给出“值”输入焦点，以便用户可以输入一个值。

我放在一起jsFiddle。错误在于，如果您给第一个输入一个值，请单击“Dummy Input”以关注当前输入，然后再次单击第一个输入，就好像第一个输入从未获得焦点。 （请注意，点击后您将无法在键盘上立即键入任何内容）。再次，这只是IE中的一个问题。

注意：如果不是在导航离开后单击第一个输入，而是使用tab键代替，则它可以工作。这似乎只是点击一个问题。

<div> 
    <label>Give me a value then give the value focus</label> 
    <input id="valueInput" type="text" /> 
    <input id="displayInput" type="text" style="display:none;" /> 
    <br /> 
    <label>Dummy Input</label> 
    <input type="text" /> 
</div> 

$(window.document).on('blur', "#valueInput", function (e) { 
    $(this).hide(); 
    $("#displayInput").show(); 
}); 

$(window.document).on('focus', "#displayInput", function (e) { 
    $("#valueInput").show().focus(); 
    $(this).hide(); 
}); 

$("#valueInput").focus(); 

jQuery的版本1.7.2

Answer 1

基于@尖尖的评论以及一些其他的google搜索，我能得到它下面的JavaScript工作。 `在`的setTimeout

$(window.document).on('blur', "#downPaymentPercent", function (e) { 
    $(this).hide(); 
    $("#downPaymentPercentDisplay").show(); 
}); 

$(window.document).on('focus', "#downPaymentPercentDisplay", function (e) { 
    var $downPaymentPercent = $("#downPaymentPercent"); 
    $(this).hide(); 
    $downPaymentPercent.show(); 
    // IE work around since the focus call is delayed, set a timed out call 
    window.setTimeout(function() { 
    $downPaymentPercent.focus(); 
    // Set cursor to the end of the input 
    $downPaymentPercent.val($($downPaymentPercent).val()); 
    }, 1); 
}); 

$("#downPaymentPercent").focus(); 

这里的工作jsFiddle