RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
怎么在angularjs中利用directive在移动端自定义一个软键盘

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

创新互联专业为企业提供旌阳网站建设、旌阳做网站、旌阳网站设计、旌阳网站制作等企业网站建设、网页设计与制作、旌阳企业网站模板建站服务，10余年旌阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

自定义的directive如下：

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

    link : function(scope, element, attrs) {
      var keylist=[1,2,3,4,5,6,7,8,9,0,'.'];
      var calculator = '
'         +''         +''+attrs.title+'
'         +''         +'
'         +'';       $.each(keylist,function(k,v){         calculator += ''+v+'
';       });       calculator += '
'         +''         +'
'         +'清空
'         +'确
定
'         +'
'         +'
'         +'
'         +'
';       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中调用如下：

可以看到只是定义了一个 calculator 属性，然后在dom中只需要加入 calculator 即可使用软键盘。

我的软键盘亮点：
1、calculator 调用的时候表单获取焦点，有人会问移动端设备在获取到焦点的时候会弹出软键盘，那岂不是会出来两个键盘呢？实际不然，directive中对此做了处理：

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

即在获取到焦点的同事失去焦点，这样就能完美的避免设备自带的键盘。

2、数字键盘中的数据和页面的表单中的数据实时联动起来是通过ng-model实现的，在获取焦点的时候directive中会获取到ng-model的值并赋给页面中的表单，这样就能实现数据联动起来，让软键盘更加完美，可参考第一张图。

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

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

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

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

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

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


文章名称：怎么在angularjs中利用directive在移动端自定义一个软键盘
本文URL：http://lswzjz.com/article/jcpogc.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.lswzjz.com

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-13

乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站