Input async focus for mobiles

Small trick that will enable async input focus on any device

HTML

<div id="container">
  <input
    type="text"
    id="target-input"
    placeholder="I'm disabled"
  />

  <label>
    <input type="checkbox" id="trigger-checkbox" />
    focus with setTimetout
  </label>
</div>

CSS

body {
  font-family: Arial;
  font-size: 16px;
}

label {
  display: block;
  margin-top: 20px;
}

input {
  box-sizing: border-box;
  font-size: inherit;
}

#container {
  position: relative;
}

#target-input {
  width: 250px;
  padding: 10px;
}

JavaScript

var $triggerCheckbox = $("#trigger-checkbox");
var $targetInput = $("#target-input");

// Create fake & invisible input
var $fakeInput = $("<input type='text' />")
	.css({
    position: "absolute",
    width: $targetInput.outerWidth(), // zoom properly (iOS)
    height: 0, // hide cursor (font-size: 0 will zoom to quarks level) (iOS)
    opacity: 0, // make input transparent :]
  });

var delay = 2000; // That's crazy long, but good as an example

$triggerCheckbox.on("change", function(event) {
	// Disable input when unchecking trigger checkbox (presentational purpose)
	if (!event.target.checked) {
		return $targetInput
			.attr("disabled", true)
			.attr("placeholder", "I'm disabled");
	}

	// Prepend to target input container and focus fake input
	$fakeInput.prependTo("#container").focus();
  
  // Update placeholder for presentational purpose
	$targetInput.attr("placeholder", "Wait for it...");

	// setTimeout, fetch or any async action will work
	setTimeout(function() {

		// Shift focus to target input
		$targetInput
			.attr("disabled", false)
			.attr("placeholder", "I'm alive!")
			.focus();

		// Remove fake input - no need to keep it in DOM
		$fakeInput.remove();
	}, delay);
  
  
  
});

  $triggerCheckbox.click();