angularjs 는 directive 를 이용 하여 모 바 일 사용자 정의 소프트 키보드 의 예 를 실현 합 니 다.

최근 회사 프로젝트 의 수요 에 있어 서 아이 패드 프로젝트 에 숫자 를 입력 해 야 하 는 부분 은 모 바 일 기기 가 자체 적 으로 가지 고 있 는 키보드 가 아 닌 사용자 정의 소프트 키 보드 를 사용 하 라 고 요구 했다.방금 수 요 를 받 고 어리둥절 했다.전에 해 본 적 이 없 었 기 때문에 나중에 생각 을 정리 해 보 니 이것 도 그렇다 는 것 을 알 게 되 었 다.먼저 실현 후의 효 과 를 살 펴 보 자.

이 루어 진 효 과 는 페이지 를 클릭 할 때 소프트 키 보드 를 꺼 내야 할 때 소프트 키 보드 를 꺼 내 고 페이지 의 중간 에 떠 서 모드 상자 와 같은 효 과 를 내 는 것 이다.소프트 키보드 에 모든 숫자 를 입력 할 수 있 고 부수 적 인 기능 은 소수점,퇴 격,비우 기,확인 등 기능 이 있다.키보드 에서 숫자 를 클릭 할 때 페이지 의 폼 에 해당 하 는 숫자 를 실시 간 으로 추가 하면 위의 그림 에서 볼 수 있다.
제품 매니저 쪽 에서 주 는 이 유 는 아이 패드 화면 이 원래 작 기 때 문 입 니 다.소프트 키보드 가 튀 어 나 오 면 절반 을 차지 하 는 화면 이 제품 의 미관 에 영향 을 주 고 어 쩔 수 없 이 해결 할 수 밖 에 없습니다.
사용자 정의 소프트 키 보드 는 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:'<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="function Item()"만 추가 하면 됩 니 다.

물론 영문 자모 라면 이런 방법 을 사용 할 수 있 습 니 다.초기 배열 에 영문 자모 구 조 를 적 고 배열 하면 됩 니 다.이 곡 동공 일 뿐 입 니 다.
이상 은 제 가 쓴 간단 한 이동 식 디지털 키보드 입 니 다.보신 분 들 께 도움 이 되 셨 으 면 좋 겠 습 니 다.
만약 에 부족 한 점 이 있 으 면 여러분 들 이 서로 교류 하 는 것 을 지적 하고 더 좋 은 방법 이 있 으 면 저 에 게 알려 주세요.프로그램 원숭이 로 서 저 는 끝 없 이 제 코드 를 최적화 하 겠 습 니 다.
이상 의 이 angularjs 는 directive 를 이용 하여 모 바 일 사용자 정의 소프트 키 보드 를 실현 하 는 예 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 을 바 랍 니 다.