Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
2011-05-18 13:44
399 查看
一、前言
这段时间做个项目,要涉及到flash开发。真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发有点像,渐渐摸到些门道,功能也开发得差不多了。于是,就像墨菲定律所述,Anything that can go wrong will go wrong(如果坏事有可能发生,不管这种可能性多么小,它总会发生,并引起最大可能的损失),遇到一个巨恶心的问题,和大家分享下。二、问题描述
在HTML文件里有一个嵌入的flash,该flash中有一个输入文本框。由于flash在嵌入HTML代码中时,wmode参数默认被设置为了window模式,这导致该flash下的所有HTML元素都会被隐藏。因此,如果想在该flash上显示一个登录框(提供用户登录,这是很正常的功能)或是在该flash上显示一个div,必须要将flash的wmode参数设为opaque或transparent(这个问题在我的另一篇文章 中有描述)。
但是问题来了,在IE下该flash中的输入文本框中是可以输入中文的,但是在非IE内核的浏览器中(如Firefox和Chrome)下无法输入中文(可以输入英文)。究其原因是因为Flash的这种模式很少用到,这是一种无窗口模式,绘制和输入取决于浏览器,这种模式对于Flash来说, 绘制效率比较低,但是可以作为HTML的层来使用,并支持透明,因此在国内还是挺常用的。由于这种模式Flash控件接收的输入来自浏览器,因此需要浏览器对Flash的wmode特殊处理。很不幸的是,除了IE对Flash ActiveX的wmode下的透明绘制和中文输入处理的很完美,别的浏览器都支持的很差。有的甚至连透明都绘制成一片黑色,就一个简单的IME输入,都 懒得解决。比如Firefox论坛上,这个问题从若干年前就被人发现了,一直无人修改,不光中文,所有依赖于IME的输入都不行,包括欧洲一些国家的输入法。
这个BUG存在好几年了,这很不幸,但是更不幸的是被我这个刚接触flash开发的新手碰到了……听说Flash Player 10.1终于修正了这个问题,可是,你不能保证用户会升级到最新版的Flash Player啊。所以可能的話,我还是应该想个办法搞定他。
三、网络上提供的一些解决办法
1. 页面上放置一个html的textfield,AS封装一个TextField,通过AS和JS通讯,在需要输入的时候把这个输入框挪过去。优点:支持各种输入法,支持输入框右键
缺点:不够优雅,AS和JS互通迅,JS加载失败则没戏
2. 实现一个带中文输入法的TextField,用这个框替代所有的TextField
优点:干净优雅,不容易出错,兼容性好
缺点:只支持自己实现的输入法,易用性差
3. 点击的时候重建flash,设置wmode的参数值为transparent,然后重新加载flash。
注:改变了flash的显示参数需要重新load的
优点:可以解决该问题@@
缺点:只要显示html,就得重新加载flash
4. 利用ExternalInerface与JavaScript window.prompt
import flash.external.*; // 將 js function 宣告出去,(也可以直接写在Html网页<script>中) ExternalInterface.call("eval", "function getInput(hint){return window.prompt(hint, '');}"); // 利用 ExternalInterface 呼叫 JS function,並取得 User 輸入文字 function doInput() { inputTxt.text = ExternalInterface.call("getInput", "請輸入文字"); }
优点:可行……
缺点:以弹出对话框形式出现,用户体验不够好。
5. 使用thickbox( http://jquery.com/demo/thickbox/ )这个opensource的JS工具,可以单纯传参数这个工具就会帮忙建立iframe,可以兼容IE和FF。
注:该方法未经过测试。
6. 使用swfInputs。详见 http://blog.sebastian-martens.de/2009/05/swfinputs-solving-mozilla-transparent-mode-win-special-chars-within-inputs/
优点:利用javascript动态增加input标签来解决。效果很好
缺点:可惜是Flex版,对我这种只用Flash开发的人没有用
7. 使用SwfText。详见 http://blog.webgene.com.tw/?cpage=1&p=2328
注:该方法属于Beta版,对我这种菜鸟不实用。
四、解决办法
没办法,网上搜了N多方法,没一个适合我的,靠……自己动手,丰衣足食,来吧!首先,IE内核的浏览器下,wmode参数设为opaque或transparent都可以,输入文本框中可以输入中文。
其次,在非IE内核的浏览器下,解决方法如下。
在嵌入flash的时候将wmode参数设置为window模式。
一个很偶然的发现,在通过iframe标签引入一个网页时,在某种很特殊的情况下(可能不止这一种情况),该iframe中显示的内容可以覆盖在flash上。
条件:给body标签增加background-color属性@@。
下面给出一个通过iframe嵌入的网页的内容(showTips.shtml):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { background:url(http://mat1.gtimg.com/auto/datalib/component/auto_kj_pic_03.gif) no-repeat; background-color:#fff; padding:0; margin:0px; width:220px; height:51px; } </style> </head> <body> <div style="font-size:14px; color:#fff; width:220px; height:51px; line-height:51px; text-align:center; " id="successTips" name="successTips"></div> <script type="text/javascript"> /* 在父页面中调用该函数更改该页面的内容 */ function setText(content) { document.getElementById('successTips').innerHTML = content; } </script> </body> </html>
父页面中的部分代码:
<div id="success_div" style="display:none;position:absolute; left: 100px; top: 347px; z-index:200; width:220px; height:51px; padding:0; margin:0px; text-align:center;" onmouseover="clearTimeout(g_timeout);" onmouseout="window.setTimeout(function(){$('success_div').style.display = 'none';}, 1000);" > <iframe name="success_frame" id="success_frame" frameborder="0" scrolling="no" width="220" height="51" src="http://www.example.com/showTips.shtml" mce_src="http://www.example.com/showTips.shtml"></iframe> </div>
于是,可以将所有想动态显示在flash上的提示信息放到一个网页中,通过iframe标签嵌入到父页面中(设置该iframe默认隐藏)。当需要显示提示信息时,显示该iframe就好了。
注:个人感觉这种方法有点山寨,不是正规的解决办法,但是,好歹也是一种解决办法不是,只是我这中项目需求中,这种方法是最省事的^_^
相关文章推荐
- sublime_text3中文无法输入的问题解决方法
- URL编码:在地栏直接输入参数带汉字的URL后,服务器端接收后出现乱码的解决方法
- ubuntu 16.04 + Qt 5.7.1 无法输入中文的解决方法
- ubuntu firefox无法输入中文问题解决方法
- Fedora27 intellij idea, intellij clion无法输入中文的解决方法
- opensuse 11.4 firefox 无法输入中文的解决方法
- Linux/deepin下Qt5无法输入中文的解决方法
- Win10正式版中文输入不了怎么办?Win10正式版无法输入中文汉字的两种解决办法
- 关于mysql无法输入中文的解决方法
- Ubuntu下Sublime Text 3解决无法输入中文的方法
- 最简方法解决QtCreator无法输入中文(ubuntu系统)
- Ubuntu下IDEA无法输入中文问题 解决方法
- Ubuntu 下搜狗输入法无法输入中文解决方法(赠福利)
- Ubuntu下Sublime Text 3解决无法输入中文的方法
- 文档大师 搜狗拼音无法输入汉字_乱码的解决方法_VB6程序
- qtcreator 无法输入中文解决方法
- ubuntu16.04搜狗输入法无法输入中文的解决方法
- Ubuntu14.04安装wineqq国际版出现无法输入中文的解决方法
- Centos 7 上 Eclipse 无法输入中文解决方法
- ubuntu下QQ国际版无法输入汉字解决方法