怎么在angularjs中利用directive在移動端自定義一個軟鍵盤

怎么在angularjs中利用directive在移動端自定義一個軟鍵盤？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供旌陽網(wǎng)站建設、旌陽做網(wǎng)站、旌陽網(wǎng)站設計、旌陽網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、旌陽企業(yè)網(wǎng)站模板建站服務，10余年旌陽做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

自定義的directive如下：

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

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

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

      $(calculator[0]).find("input").focus(function(){
        document.activeElement.blur();
      });
      //關閉模態(tài)框
      $(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('change');
      });
      //清空
      $(calculator[0]).find(".cleanup").click(function(){
        $(calculator[0]).find("input").val("").trigger('change');
      });
      //點擊數(shù)字
      $(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+''+$(this).attr("value");
        }
        $(calculator[0]).find("input").val(val).trigger('change');
      });
      //確認
      $(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('touchstart', 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('touchmove', 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、數(shù)字鍵盤中的數(shù)據(jù)和頁面的表單中的數(shù)據(jù)實時聯(lián)動起來是通過ng-model實現(xiàn)的，在獲取焦點的時候directive中會獲取到ng-model的值并賦給頁面中的表單，這樣就能實現(xiàn)數(shù)據(jù)聯(lián)動起來，讓軟鍵盤更加完美，可參考第一張圖。

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

4、在項目中用到自定義的這個軟鍵盤的時候有些需要在點擊鍵盤的確定按鈕之后需要進行一些數(shù)據(jù)處理，于是后來在directive的確定安妮中中加了一個回調，我們可以在點擊確定之后調用這個回調，可以達到確定數(shù)字之后緊接著自動去執(zhí)行需要執(zhí)行的事件。只需要在dom中加上callback="functionItem()"即可。

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

分享文章：怎么在angularjs中利用directive在移動端自定義一個軟鍵盤
標題路徑：http://muchs.cn/article12/jcpogc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、網(wǎng)站營銷、網(wǎng)站策劃、網(wǎng)站設計、網(wǎng)站維護、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)