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」的部份還有問題，有空再試吧！或是較新的版本是沒問題的。