Raise keyboard on input type text in iframe at fixed position on chrome for android when zoomed

StackOverflow https://stackoverflow.com/questions/14445276

Domanda

On Chrome for Android, touching an html text input element located inside an iframe at fixed position does not raise the keyboard consistently when the document is zoomed greater than 100 percent.

http://theyrule.net/test/iframetest/

For example: visit this page on Chrome for Android and select the input, it will bring up the keyboard. Now dismiss the keyboard and scale the page (I have put some content on the page just so the scaling is discernible). If the page is zoomed in - touching the html text input element in the iframe will not always bring up the input. It can be brought up again by returning to 100% zoom level.

index.html

<!DOCTYPE html>
<html>
  <style>
    body {background-color:#FFCC00; font:80px sans-serif; color:#FFF; width:1000px; height:2000px;}
    div { width:300px; height:1000px; float:left; padding:0.1em;}
  </style>
  <head>
  </head>
  <body>
  <div style="background-color:#CC3333;">A</div>
  <div style="background-color:#FF9900;">B</div>
  <div style="background-color:#FFCC00;">C</div>
  <iframe src="contents.html" style="width:300px; height:100px; position:fixed; bottom:0; right:0;">
  </body>
</html>

contents.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" />
</body>
</html>

I would like the keyboard to be raised at any zoom level.
This appears to be a Chrome bug, is there a workaround?

Is this a focus issue? I can detect the touch event in the iframe, for example if I set a listener I can make it clear the placeholder text in the input, but it will not bring up the keyboard.

È stato utile?

Soluzione

Adding a listener to touchstart which then calls focus on the input field and prevents the default action seems to be a work around. The input element was being blurred - perhaps the focus went through to the embedding page.

<!DOCTYPE html>
<html>
<body>
<input type="text" id="tt"/>
<script>
document.getElementById("tt").addEventListener('touchend',function(e){e.target.focus(); e.preventDefault();}, false);
</script>
</body>
</html>

Altri suggerimenti

Korimako's solution worked for me, but his example used touchend where his explanation said touchstart. The touchend event did not work for me, but touchstart did.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top