怎么在angularjs中利用directive在移动端自定义一个软键盘

怎么在angularjs中利用directive在移动端自定义一个软键盘？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

自定义的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();
      });
      //关闭模态框
      $(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');
      });
      //点击数字
      $(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、数字键盘中的数据和页面的表单中的数据实时联动起来是通过ng-model实现的，在获取焦点的时候directive中会获取到ng-model的值并赋给页面中的表单，这样就能实现数据联动起来，让软键盘更加完美，可参考第一张图。

3、为了让软键盘点击的时候更加逼真，在自定义的directive中对按钮元素进行了处理，当点击按钮的时候给当前被点击的元素添加一个class，效果带阴影效果的按钮往下移动了几像素，看起来有点击的效果，产品和UI没有给我这个需求，是我自己自由发挥的，哈哈。

4、在项目中用到自定义的这个软键盘的时候有些需要在点击键盘的确定按钮之后需要进行一些数据处理，于是后来在directive的确定安妮中中加了一个回调，我们可以在点击确定之后调用这个回调，可以达到确定数字之后紧接着自动去执行需要执行的事件。只需要在dom中加上callback="functionItem()"即可。

当然如果是英文字母的话也可以用这种方法，只需要在初始的数组中写上英文字母布局排好即可，异曲同工而已。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。