Question

我想根据用户是否关注输入来切换输入的可见性。我希望允许用户能够编辑输入，当他们离开时我希望在输入中显示它们刚刚编辑的那个，这将＆＃34;格式化＆＃34;编辑后的输入。

就我而言，我有两个输入元素。＆＃34;显示＆＃34;当用户导航离开＆＃34;值时，输入应该显示＆＃34;输入。下次用户给出＆＃34;显示＆＃34;输入焦点，它应该给出＆＃34;值＆＃34;输入焦点，以便用户可以输入值。

我把jsFiddle放在一起。错误是如果你给第一个输入一个值，点击＆＃34; Dummy Input＆＃34;失去对当前输入的关注，然后再次点击第一个输入，就像第一个输入永远不会聚焦一样。（注意，您无法在点击后立即在键盘上输入任何内容）。同样，这只是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

基于@Pointy的评论以及其他一些谷歌搜索，我能够通过以下Javascript使其工作。

$(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

IE - 隐藏和显示输入在重新显示输入时无法获得焦点

1 个答案: