In my web app, I have iframes at varying z-indices. I am detecting touchstart
events on some elements in the iframes. However, if I have a text input field overlapping an element capturing touchstart
, the input field starts behaving erratically: tapping a second time in the field un-focuses it, you are unable to select any text, but you are able to type in the text field.
It appears that the only solution might be to stop capturing touchstart
events on the background frame. I'd prefer a solution like a transparent div
to capture the events as an intermediary, but I haven't yet gotten that working. Are there other workarounds?
Sample page is at jsfiddle, but here's the code:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
iframe {
position:absolute;
}
#background {
border: solid 3px red;
z-index:1;
width: 20em;
height: 20em;
}
#foreground, #foreground2 {
border: solid 2px yellow;
z-index:2;
top: 15em;
height: 5em;
}
#foreground2 {
top: 22em;
}
</style>
<script type='text/javascript'>
window.onload=function(){
document.getElementById("foreground").contentDocument.write("<input type='text' value='text'/><input type='text'/>");
document.getElementById("foreground2").contentDocument.write("<input type='text' value='text'/><input type='text'/>");
document.getElementById("background").addEventListener("touchstart", function() {
console.log("touch");
});
}
</script>
</head>
<body>
<iframe id=background></iframe>
<iframe id=foreground></iframe>
<iframe id=foreground2></iframe>
</body>
</html>