慎用wmode属性的Opaque参数(输入中文时输入法选字框跑到左上角的问题 )

  • 本站文章除注明转载外,均为本站原创或者翻译。
  • 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商;
  • 本站部分原创和翻译文章提供markdown格式源码,欢迎使用文章源码进行转载;
  • 本博客采用 WPCMD 维护;
  • 本文标题:慎用wmode属性的Opaque参数(输入中文时输入法选字框跑到左上角的问题 )
  • 本文链接:http://zengrong.net/post/18.htm

在制作Chat Union系统时,有一个功能暂时不打算使用Flash实现,但这个功能又必须出现在Flash中。因此考虑使用一个div标签,让其漂浮在Flash动画上方,提供这个暂时不用Flash实现的功能。

但是默认情况下,Flash影片是处于最上层的,无法将 <div>置于其上。查阅Flash的帮助文件,发现这样一段描述:

wmode 属性/参数

Window | Opaque | Transparent

模板变量:$WM

说明
(可选)使您可以使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示的功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。

“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。

“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分进行显示,这样可能会降低动画性能。

“Opaque windowless”和“Transparent windowless” 都可与 HTML 层交互,并允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于“Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来。

如果忽略此属性,默认值为 Window。仅适用于 object。

因此,在HTML中将 <object> 的wmode参数设成这样:


然后将一个HTML的 <div> 置于Flash影片之上,测试成功。

但是,问题随之出现。许多客人在聊天室中打字的时候发现,输入法的选字框会跑到页面的左上角,而且会影响网页的排版,将Flash影片挤到下面。有时甚至无法将文字输入到Flash中。为了还原错误,我使用了多款输入法,发现微软的所有输入法都有这个问题。因为微软输入法在选字的时候都有一个虚线选择,我怀疑是这个虚线选择功能出现问题所致。

可是,不能单单怀疑微软输入法的兼容性不好。因为,同样的程序,在昨天就没有出现这个情况。和开发伙伴测试了其他输入法,发现智能ABC输入法也存在这个问题,只是在我的计算机上没有出现。

开始怀疑加入的 <div>,将其屏蔽,问题仍然存在。

继续怀疑到 wmode 属性的头上。删除 <param name=\"wmode\" value=\"Opaque\"> 语句,问题消失。

仔细思考,因为“Opaque” 使应用程序隐藏页面上位于它后面的所有内容,也就是说使用了这个参数之后,在网页中不是Flash位于最上而是 <div> 位于最上了,某些输入法会将焦点设定为网页中位于最上的对象(也就是 <div>中)。而这个 <div> 又是使用绝对定位“漂浮”在网页上的,这就造成了输入法的选字框定位不准确,也就发生了刚才的问题了。

从帮助文件中看来,使用“Opaque windowless”参数应该会好一些,不过,我们实在不愿意再试