2010-07-01

[JavaScript] 畫面模擬鍵盤輸入

螢幕小鍵盤 輸入 +  左右移 + 退後鍵(Backspace) WEB版

參考網站 :http://www.wretch.cc/blog/JimmyYu/14439487



            //輸入字元
            function set_input_data(arg1){
              
                var pos = doGetCaretPosition();
                                 
                var p = ctrl.value;
                //從游標處拆開兩段字串
                var startValue =""
                if(pos != 0)
                    startValue = p.substr(0,pos);
                
                var endValue =p.substr(pos);
               
                //前段字串 + 加入的字元 +後段字串
                ctrl.value  = startValue +  arg1 + endValue;
               
                doSetCarePosition(pos+1);

            }

            //BackSpace 倒退鍵
            function string_back() {
                    var pos = doGetCaretPosition();
                                 
                    var p = ctrl.value;
                                       
                    if(p!='')
                    {
                        //從游標處拆開成兩段字串
                        //前段字串要從游標處扣掉一個字元
                        //後段字串直接帶出
                        var startValue = p.substr(0,pos -1);
                        var endValue = p.substr(pos);

                        //把前後兩段字串重組
                        ctrl.value  = startValue + endValue;
                       
                    }
                    doSetCarePosition(pos-1);
            }
           
            //輸入框游標往左(向左鍵)
            function onFocusToLeft()
            {
                    var nowPos = doGetCaretPosition();
                   
                    nowPos = nowPos - 1;
                                                           
                    doSetCarePosition(nowPos);
            }           
           
            //輸入框游標往右(向右鍵)
            function onFocusToRight()
            {
                    var nowPos = doGetCaretPosition();
                   
                    nowPos = nowPos + 1;
                                       
                    doSetCarePosition(nowPos);
            }
           
            //設定游標位置
            function doSetCarePosition(pos)
            {
                    if(ctrl.setSelectionRange)
                    {
                        ctrl.focus();
                        ctrl.setSelectionRange(nowPos,nowPos);
                    }
                    else if (ctrl.createTextRange) {
                        var range = ctrl.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', pos);
                        range.moveStart('character', pos);
                        range.select();
                    }
            }
           
            //取得游標目前位置
            function doGetCaretPosition()
            {
                    var CaretPos = 0;
                    if (document.selection) {
                        ctrl.focus();
                        var Sel = document.selection.createRange ();
                        Sel.moveStart ('character', -ctrl.value.length);
                        CaretPos = Sel.text.length;
                    }
                   
                    return  CaretPos;
             }

沒有留言:

張貼留言