欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularjs利用directive實現(xiàn)移動端自定義軟鍵盤的示例

 更新時間:2017年09月20日 07:46:03   作者:雷厲風(fēng)行L  
下面小編就為大家?guī)硪黄猘ngularJS利用directive實現(xiàn)移動端自定義軟鍵盤的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近公司項目的需求上要求我們iPad項目上一些需要輸入數(shù)字的地方用我們自定義的軟鍵盤而不是移動端設(shè)備自帶的鍵盤,剛接到需求有點懵,因為之前沒有做過,后來理了一下思路發(fā)現(xiàn)這東西也就那樣。先看一下實現(xiàn)之后的效果:

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

產(chǎn)品經(jīng)理那邊給的原因是iPad屏幕本來就小,如果軟鍵盤彈出的話會占用一半的屏幕,影響產(chǎn)品的美觀,無奈只能想辦法搞定。

自定義的軟鍵盤使用angularJS的directive的自定義指令來做到的,angularJS的directive這里不做解釋,如果不清楚的話可以去angular官網(wǎng)看看。用的是自定義一個屬性(restrict:'A'),這樣封裝過之后在需要用到軟鍵盤的時候只需要在<input>中加入自定義的屬性即可調(diào)出軟鍵盤,使用起來非常簡單,自定義的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();
      });
      //關(guān)閉模態(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中調(diào)用如下:

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

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

我的軟鍵盤亮點:
1、calculator 調(diào)用的時候表單獲取焦點,有人會問移動端設(shè)備在獲取到焦點的時候會彈出軟鍵盤,那豈不是會出來兩個鍵盤呢?實際不然,directive中對此做了處理:

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

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的確定安妮中中加了一個回調(diào),我們可以在點擊確定之后調(diào)用這個回調(diào),可以達到確定數(shù)字之后緊接著自動去執(zhí)行需要執(zhí)行的事件。只需要在dom中加上callback="functionItem()"即可。

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

以上是我寫的簡單的移動端數(shù)字鍵盤,希望對看到的人有所幫助。

如果有不足的地方還望指正大家相互交流,如果有更好的方法也請告訴我一下,作為一只程序猿,我要碼無止境的優(yōu)化我的代碼。

以上這篇angularjs利用directive實現(xiàn)移動端自定義軟鍵盤的示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS表單驗證中級篇(3)

    AngularJS表單驗證中級篇(3)

    這篇文章主要為大家詳細介紹了AngularJS表單驗證,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 在Angular使用ng-container元素的操作詳解

    在Angular使用ng-container元素的操作詳解

    ng-container 是 Angular 2+ 中可用的一個元素,可以作為結(jié)構(gòu)指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
    2024-02-02
  • 解決angularjs service中依賴注入$scope報錯的問題

    解決angularjs service中依賴注入$scope報錯的問題

    今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • AngularJS中run方法的巧妙運用

    AngularJS中run方法的巧妙運用

    前端技術(shù)的發(fā)展是如此之快,各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡直讓人目不暇接,緊跟時代潮流,學(xué)習(xí)掌握新知識自然是不敢怠慢。下面這篇文章主要給大家介紹了AngularJS中run方法的巧妙運用,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-01-01
  • Angularjs根據(jù)json文件動態(tài)生成路由狀態(tài)的實現(xiàn)方法

    Angularjs根據(jù)json文件動態(tài)生成路由狀態(tài)的實現(xiàn)方法

    最近做項目遇到這樣一個新需求,就是需要根據(jù)json文件動態(tài)生成路由狀態(tài),通過查閱相關(guān)資料實現(xiàn)了此功能,下面小編把問題總結(jié)分享到腳本之家平臺供大家參考
    2017-04-04
  • 使用AngularJS來實現(xiàn)HTML頁面嵌套的方法

    使用AngularJS來實現(xiàn)HTML頁面嵌套的方法

    這篇文章主要介紹了使用AngularJS來實現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下
    2015-06-06
  • 詳解Angular.js中$http攔截器的介紹及使用

    詳解Angular.js中$http攔截器的介紹及使用

    攔截器就是在目標達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期,下面這篇文章主要給大家介紹了關(guān)于Angular.js中$http攔截器的介紹及使用的相關(guān)資料,文中介紹的非常詳細,需要的朋友可以參考學(xué)習(xí)。
    2017-07-07
  • Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法(推薦)

    Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法(推薦)

    這篇文章主要介紹了Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法,需要的朋友可以參考下
    2017-08-08
  • Angular組件庫ng-zorro-antd實現(xiàn)radio單選框選擇

    Angular組件庫ng-zorro-antd實現(xiàn)radio單選框選擇

    這篇文章主要為大家介紹了Angular組件庫ng-zorro-antd實現(xiàn)radio單選框取消選擇實現(xiàn)問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • Angular8 簡單表單驗證的實現(xiàn)示例

    Angular8 簡單表單驗證的實現(xiàn)示例

    這篇文章主要介紹了Angular8 簡單表單驗證的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06

最新評論