directive實作行動端自訂軟鍵盤程式碼分享

本文主要為大家帶來一個angularJS利用directive實作行動端自訂軟鍵盤的範例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

最近公司專案的需求上要求我們iPad專案上一些需要輸入數字的地方用我們自訂的軟鍵盤而不是行動裝置自帶的鍵盤，剛接到需求有點懵，因為之前沒做過，後來理了一下思路發現這東西也是那樣。先看一下實現之後的效果：

實現的效果就是當點擊頁面中需要彈出軟鍵盤的時候軟鍵盤彈出，浮在頁面的中間，和模態框一樣的效果，可以在軟鍵盤中輸入任何數字，附帶的功能有小數點、退格、清空、確定等功能。當在鍵盤上點擊數字的時候頁面中的表單中即時的添加對應的數字，上圖中可以看到。

產品經理那邊給的原因是iPad螢幕本來就小，如果軟鍵盤彈出的話會佔用一半的螢幕，影響產品的美觀，無奈只能想辦法搞定。

自訂的軟鍵盤使用angularJS的directive的自訂指令來做到的，angularJS的directive這裡不做解釋，如果不清楚的話可以去angular官網看看。用的是自訂屬性（restrict:'A'）,這樣封裝過之後在需要用到軟鍵盤的時候只需要在中加入自訂的屬性即可調出軟鍵盤，使用起來非常簡單，自訂的directive如下：在

angular.module('ng-calculator', []).directive('calculator', ['$compile',function($compile) {
  return {
    restrict : 'A',
    replace : true,
    transclude : true,
    template:&#39;<input/>&#39;,

    link : function(scope, element, attrs) {
      var keylist=[1,2,3,4,5,6,7,8,9,0,&#39;.&#39;];
      var calculator = &#39;<p class="ngcalculator_area"><p class="bg"></p>&#39;
        +&#39;<p class="calculator">&#39;
        +&#39;<p class="title close">&#39;+attrs.title+&#39;</p><p class="inputarea">&#39;
        +&#39;<input type="text" id="text" ng-tap="getInput()" class="&#39;+attrs.class+&#39;" ng-model="&#39; +attrs.ngModel+&#39;">&#39;
        +&#39;</p><p class="con">&#39;
        +&#39;<p class="left">&#39;;
      $.each(keylist,function(k,v){
        calculator += &#39;<p class="keyboard num" value="&#39;+v+&#39;">&#39;+v+&#39;</p>&#39;;
      });

      calculator += &#39;</p>&#39;
        +&#39;<p class="right">&#39;
        +&#39;<p class="keyboard blueIcon backstep"></p>&#39;
        +&#39;<p class="keyboard blueIcon cleanup">清空</p>&#39;
        +&#39;<p class="keyboard ensure ensure">确<br>定</p>&#39;
        +&#39;</p>&#39;
        +&#39;</p>&#39;
        +&#39;</p>&#39;
        +&#39;</p>&#39;;
      calculator = $compile(calculator)(scope);
      element.bind(&#39;focus&#39;,function(){
        document.body.appendChild(calculator[0]);
        document.activeElement.blur();
      });

      $(calculator[0]).find("input").focus(function(){
        document.activeElement.blur();
      });
      //关闭模态框
      $(calculator[0]).find(".close").click(function(){
        calculator[0].remove();
        var callback = attrs.callback;
        if(typeof callback!="undefined"){
          scope[callback]();
        }
      });
      $(calculator[0]).find(".bg").click(function(){
        calculator[0].remove();
      });
      //退格
      $(calculator[0]).find(".backstep").click(function(){
        if(typeof $(calculator[0]).find("input").val()=="undefined"){
          $(calculator[0]).find("input").val("");
        }
        $(calculator[0]).find("input").val($(calculator[0]).find("input").val().substring(0,$(calculator[0]).find("input").val().length-1)).trigger(&#39;change&#39;);
      });
      //清空
      $(calculator[0]).find(".cleanup").click(function(){
        $(calculator[0]).find("input").val("").trigger(&#39;change&#39;);
      });
      //点击数字
      $(calculator[0]).find(".num").click(function(){
        var val = $(calculator[0]).find("input").val();
        var filter = attrs.filter;
        if(typeof filter!="undefined"){
          val = scope[filter](val,$(this).attr("value"));
        }else{
          val = val+&#39;&#39;+$(this).attr("value");
        }
        $(calculator[0]).find("input").val(val).trigger(&#39;change&#39;);
      });
      //确认
      $(calculator[0]).find(".ensure").click(function(){
        calculator[0].remove();
        var callback = attrs.callback;
        if(typeof callback!="undefined"){
          scope[callback]();
        }
      });
      //点击效果
      $(calculator[0]).find(".keyboard").click(function(){
        $(this).addClass("keydown");
        var that = this;
        setTimeout(function(){
          $(that).removeClass("keydown");
        },100)
      });
      var position = {
        startX:0,
        startY:0
      };
      calculator[0].getElementsByClassName("title")[0].addEventListener(&#39;touchstart&#39;, function(e) {
        e.preventDefault();
        var transform = $(calculator[0]).find(".calculator").css("transform").match(/translate\((.*),(.*)\)/);
        if(transform==null){
          position.startX = e.targetTouches[0].clientX;
          position.startY = e.targetTouches[0].clientY;
        }else{
          position.startX = e.targetTouches[0].clientX-parseInt(transform[1]);
          position.startY = e.targetTouches[0].clientY-parseInt(transform[2]);
        }
      }, false);
      calculator[0].getElementsByClassName("title")[0].addEventListener(&#39;touchmove&#39;, function(e) {
        e.preventDefault();
        var moveX = e.targetTouches[0].clientX-position.startX;
        var moveY = e.targetTouches[0].clientY-position.startY;
        $(calculator[0]).find(".calculator").css("transform","translate("+moveX+"px,"+moveY+"px)");
      }, false);
    }
  };
}]);

dom中呼叫如下：

##

<input type="text" placeholder="按价格搜索" ng-model="spaAndHairSeaInPrice" title="按价格搜索" calculator>

可以看到只是定義了一個calculator 屬性，然後在dom中只需要加入calculator 即可使用軟鍵盤。

我的軟鍵盤亮點：

1、calculator 呼叫的時候表單取得焦點，有人會問行動裝置在取得到焦點的時候會彈出軟鍵盤，那豈不是會出來兩個鍵盤呢？實際上不然，directive中對此做了處理：

即在獲取到焦點的同事失去焦點，這樣就能完美的避免設備自帶的鍵盤。

2、數字鍵盤中的資料和頁面的表單中的資料即時連動起來是透過ng-model實現的，在取得焦點的時候directive中會取得到ng-model的值並賦給頁面中的表單，這樣就能實現資料連動起來，讓軟鍵盤更加完美，可參考第一張圖。

3、為了讓軟鍵盤點擊的時候更加逼真，在自訂的directive中對按鈕元素進行了處理，當點擊按鈕的時候給當前被點擊的元素添加一個class，效果帶陰影效果的按鈕往下移動了幾像素，看起來有點擊的效果，產品和UI沒有給我這個需求，是我自己自由發揮的，哈哈。

4、在專案中用到自訂的這個軟鍵盤的時候有些需要在點擊鍵盤的確定按鈕之後需要進行一些資料處理，於是後來在directive的確定安妮中加了一個回調，我們可以在點擊確定之後調用這個回調，可以達到確定數字之後緊接著自動去執行需要執行的事件。只需要在dom中加上callback="functionItem()"即可。

當然如果是英文字母的話也可以用這種方法，只需要在初始的數組中寫上英文字母佈局排好即可，異曲同工而已。

相關推薦：

js如何解決軟鍵盤遮擋輸入框的問題

以上是directive實作行動端自訂軟鍵盤程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！