2013年12月24日 星期二

LimeJS : 加入 input 來取得資料

玩了一年多的 LimeJS ,一直以為它無法加入像 textarea、input ...... 等元件,來讓使用者輸入文字資料。查了半天,似乎也沒有解決這個需求的方案。不想被 LimeJS 只能開發出「點、點、點」操作方式的現況給束縛,連試了好幾天,總算是皇天不負苦心人,硬是讓我找出可能的方案了!


以在 LimeJS 的程式中加入一個 input 為例,目前試出的方法是:

  • 利用「document.createElement('input')」來新增一個「input」元件。
  • 將前述的「input」元件以「appendChild」「附掛」在一個「lime.Sprite」元件上。
  • 將前述的 「lime.Sprite」元件加入場景中。

完成上面的步驟以後,去對前述的「lime.Sprite」元件操作時,「附掛」在它上面的「input」元件就會隨之改變位置、大小......。

此時的「input」元件(底下假設它為 inputText)仍然可以利用 CSS 來調整一下:

//新增 input
var inputText = document.createElement('input');
//設定 input 的格式
inputText.style['width'] = '450px';
inputText.style['height'] = '50px';
inputText.style['font-size'] = '30px';
inputText.style['font-family'] = ’標楷體';
//input 的載體
var inputSprite = new lime.Sprite();
inputSprite.appendChild(inputText);


真的這麼簡單嗎?如果是應用在 PC 版的瀏覽器,基本上,這樣就足夠了。不過,如果是應用在 iOS 或是 Android 上的 mobile 版瀏覽器,就會發現一件悲慘的事:「看得到,用不到!」,對準「input」輸入區,用手指頭戳了半天,平板或是手機的虛擬鍵盤就是沒反應,我的 iOS 7 的 iPad ,Safari 沒反應,不過,iOS 4.3 上的倒是可以使用。很明顯,「input」元件一定是被別的物件給搶了風彩了,才會對手指頭沒反應。沒關係,可以試試看,特別針對「input」元件的「按一下」檢查一下,當使用者對準輸入區按一下時,我們設定它的「focus」,即可解決鍵盤跑不出來的問題:

goog.events.listen(inputText,['mouseup','touchend'],function(e){
   inputText.focus();
});

看到在 input 裡終於可以輸入字,實在是有被感動到!花了很多時間實驗吔!

文字輸入前的畫面配置
文字輸入完,畫面被往上擠

也別高興得太早,真是一波未平,一波又起,輸入完文字,以 iPad 來說,虛擬鍵盤消失後,畫面上的東西沒被歸位,整個畫面往上擠,全亂了,好慘!
上面的東西被遮住了

沒關係,在輸入完文字的程序裡加入底下這行,把視窗拉回來就好了:

window.scrollTo(0, 1);

處理完,看看正常版如下圖:
正常的畫面
那如何讓使用者按 Enter 鍵後繼續後續的動作呢?我們監聽「document」的「keyup」事件即可:

goog.events.listen(document, ['keyup'], inputKeyupHandler=function(e) {
   if(e.keyCode == 13) {
      //
      //按 Enter 以後的程式碼
      //
      goog.events.unlisten(document, ['keyup'], inputKeyupHandler);
   }
});


最後,使用完「input」元件,記得將它刪除:

inputText.parentNode.removeChild(inputText);

我們利用「parentNode」取得它的 parent, 並以「removeChild」來將它移除。

上述的方法在我的 iPad (iOS 7.04)上,以 Safari 測試都沒問題,倒是在 Android 2.3 的 mobile Chrome 中,設定「focus」的部份還有問題,有空再試吧!或是較新的版本是沒問題的。




沒有留言:

張貼留言

 
© 2009. Design by Pocket