I am attempting to redirect a click event from some element that is on screen to a text input that is off screen. Clicking on the element that is on screen triggers a handler that simulates the same event on the off-screen element.
When a user clicks a text input via the browser, both the focus and click handlers for the text input fire. However, when the simulated click event is dispatched on the off-screen text input no focus event occurs.
Further, when a simulated focus event is fired on a text input, the cursor does not appear in the text input as if the text input had been clicked.
Runnable snippet available at http://jsfiddle.net/k32n30vf/2/ since SO doesn't support CoffeeScript.
Code (CoffeeScript)
one = document.getElementById("one")
two = document.getElementById("two")
logger = document.getElementById("log")
#In order for the span to be focusable, it must have tabIndex != -1
one.tabIndex = 0
#Adds text to top of logger paragraph
log = (message) ->
entry = document.createElement('p')
entry.classList.add("log")
entry.innerText = message
logger.insertBefore(entry, logger.firstChild)
#Event listener that logs events w / source
reportEvent = (event) -> log("#{event.currentTarget.id} #{event.type}")
#Listen on click and focus for both elements
e.addEventListener "click", reportEvent, false for e in [one, two]
e.addEventListener "focus", reportEvent, false for e in [one, two]
#Generic simulate method
simulate = (what, where) ->
where = if where == "one" then one else two
what = if what == "click" then new MouseEvent("click") else new FocusEvent("focus")
where.dispatchEvent what
#Wire up buttons
document.getElementById("sim-one-clk").addEventListener("click", () -> simulate("click", "one"))
document.getElementById("sim-two-clk").addEventListener("click", () -> simulate("click", "two"))
document.getElementById("sim-one-fcs").addEventListener("focus", () -> simulate("focus", "one"))
document.getElementById("sim-two-fcs").addEventListener("focus", () -> simulate("focus", "two"))
CSS
p.log {
margin: 0px;
padding: 0px;
}
HTML
<p> Instructions:</p>
<ol>
<li> Click "Simulate Click on #2"</li>
<li> Note how no text cursor appears on input</li>
<li> Actually click on input</li>
<li> Note how text cursor appears on input</li>
</ol>
<p><span id="one">This span is #1</span>
</p>
<p>
<input id="two" value="this input is #2"></input>
</p>
<p>
<input id="sim-one-clk" type="button" value="Simulate Click on #1"></input>
</p>
<p>
<input id="sim-one-fcs" type="button" value="Simulate Focus on #1"></input>
</p>
<p>
<input id="sim-two-clk" type="button" value="Simulate Click on #2"></input>
</p>
<p>
<input id="sim-two-fcs" type="button" value="Simulate Focus on #2"></input>
</p>
<p id="log"></p>
Notice that if the on screen element is focused and the Simulate Click on #2 button is pressed, the text cursor does not appear in the off screen element. However clicking on the off screen element results in the text cursor appearing.
