2010年4月1日 星期四

Flash在wmode設定為transparent時中文輸入發生問題的解法=SwfText Beta版

首先聲明,這篇文章不是為了愚人節做效果的,所以請安心看下去。

當Flash的wmode設定為transparent時,在IE瀏覽時輸入中文,會發生輸入法造成Flash暫時位移的情形;在Firefox時更慘,中文字根本出不來。這個問題存在好幾年了,聽說Flash Player 10.1終於修正了這個問題。可是,就算過一陣子之後Flash Player 10.1的安裝率到了99.9%,最後那0.1%很可能包含你某個客戶,過不了客戶那一關,案子當然也沒辦法上線。所以可能的話,我還是想找個辦法來解決它。

其實去年,國外就有個叫swfInputs的東西,利用javascript動態增加input標籤來解決。效果很好,但可惜是Flex版,對我這種只用Flash的開發者來說派不上用場。我嘗試過把它改寫成Flash版本,不過牽扯到一些Flex專用的元件,最後沒改成功。前陣子,Ticore提出了一個AS 2的解法,不過他提到,這方法要寫as,又要寫javascript,還要加個html tag,在專案使用上不方便。這時我想起了奶綠茶之前分享了在as裡面嵌入js的方法,結合這三篇文章的東西,或許可以搞出個AS 3版的類別來用。經過一天的奮戰,終於有了初步的成果啦~~就先叫它SwfText Beta版吧。

這類別的特色是,你只需要import這個類別檔,簡單幾行設定就可以用啦,程式碼不會散落在各處。支援單行、多行、password等文字輸入框。目前Firefox跟Google chrome使用起來應該都很正常。線上範例看這裡

說明一下用法:
首先當然是要import進來,在你含有文字輸入框的那個表單元件匯入:
import webgene.text.SwfText;
接著產生一個SwfText實體:
var swfText:SwfText = new SwfText(this, "flashContent");
第一個參數是文字輸入框在哪一層元件(DisplayObject)底下,就像前面講的,最好就是那個表單元件,所以直接用this,第二個參數是swfObject時設定的swf container名稱,這裡就要稍微留意你自己是用哪個名稱啦。
最後,用addTextField方法把你的輸入文字(TextField)加進來,有幾個加幾個。假設有text1,text2,text3的話:
swfText.addTextField(text1);
swfText.addTextField(text2);
swfText.addTextField(text3);
就這樣!夠簡潔了吧!

之所以稱為Beta版,當然是還有些問題沒搞定:
1.用IE 6~IE 8時都會有些奇奇怪怪的問題跑出來,但反正IE頂多是Flash暫時性的位移而已,我乾脆在瀏覽器為IE時就不處理,跟你沒用這個類別時一樣(程式自動會判斷)。之後有空再來仔細研究。
2.tab鍵無法切換。因為我一次只用js動態產生一個html的tag,所以這功能可能很難加上去。
3.多行輸入時沒辦法限定輸入文字的長度。因為單行跟密碼時是用input標籤,多行時是用textarea標籤,後者好像沒有maxlength之類的屬性可以限定長度。
4.對位的部分,固定size的Flash當然沒問題,但當Flash長寬是100%時,要注意,目前這類別必須是元件對齊左上角,並且Flash沒有縮放,文字框才對得起來,也就是要設定成:
stage.align = StageAlign.TOP_LEFT;  
stage.scaleMode = StageScaleMode.NO_SCALE;
如果是其他的對齊方式,可能要自行修改原始碼了。之後再來看看有沒有辦法依對齊方式來修改座標,但是scale的話可能就沒辦法了。
5.其他可能還沒想到的細節。

目前這類別雖然不是很完美,但我覺得大部分情況下應該堪用了。程式碼下方有連結歡迎取用與修改,也希望有任何bug或意見的話,能夠給我參考。

原始碼下載

3 則留言: