提高鍵盤輸入類型文本在iframe中的固定位置在chrome上的固定位置在放大時用於android

在Android版Chrome上，觸摸位於固定位置的iframe中的html文本輸入元素不會在文檔放大時始終如一地提高鍵盤比100％。提高鍵盤輸入類型文本在iframe中的固定位置在chrome上的固定位置在放大時用於android

例如：訪問在Chrome這個網頁Android和選擇輸入，就會調出鍵盤。現在關閉鍵盤並縮小頁面（我已經在頁面上放了一些內容，以便縮放可以辨別）。如果頁面放大 - 觸摸iframe中的html文本輸入元素不會始終顯示輸入。它可以通過返回到100％縮放級別再次提出。

的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>

我想鍵盤在任何縮放級別得到提升。
這似乎是一個Chrome錯誤，有沒有解決方法？

這是焦點問題嗎？我可以檢測iframe中的觸摸事件，例如，如果我設置了偵聽器，我可以在輸入中清除佔位符文本，但它不會彈出鍵盤。

來源

2013-01-21 Korimako

向touchstart添加一個偵聽器，然後調用焦點在輸入字段並防止默認動作似乎是一個工作。輸入元素被模糊 - 可能是焦點轉到了嵌入頁面。

<!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>

來源

2013-01-21 20:14:38 Korimako

Korimako的解決方案爲我工作，但他的例子使用touchend他的解釋說touchstart。 touchend事件對我來說不起作用，但touchstart做到了。

來源

2013-10-03 17:55:08

提高鍵盤輸入類型文本在iframe中的固定位置在chrome上的固定位置在放大時用於android

回答

相關問題