Question

I want to toggle the visibility of an input based on whether or not the user has focus on the input. I want to allow the user to be able to edit an input and when they navigate away I want to display in input in place of the one they just edited, which will “format” the edited input.

In my case, I have two input elements. The “display” input should show when the user navigates away from the “value” input. The next time the user gives the “display” input focus, it should give the “value” input focus so that the user can enter a value.

I put together a jsFiddle. The error is that if you give the first input a value, click on “Dummy Input” to lose focus on the current input, and then click on the first input again, it’s as if the first input never got focus. (Notice you won’t be able to type anything on the keyboard immediately after clicking). Again, this is only an issue in IE.

Note: It works if instead of clicking on the first input after navigating away, if you use the tab key instead. It seems to only be an issue with clicking.

    <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 Version 1.7.2

Answer 1

Based on @Pointy’s comment as well as some other googling, I was able to get it to work by the following 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();

Here’s the working jsFiddle