관련없는 입력 필드에서 사용자가 Enter 키를 누르면 각성 부트 스트랩 날짜 표시기가 열림

Question

검색에서 '날짜'부터 '날짜'까지 2 개의 datepickers가 있습니다. 또한 여러 검색 기준에 대한 입력 필드와 제출 버튼이 있습니다.

포커스가 텍스트 필드에 있고 사용자가 Enter 키를 누르면 폼을 보내는 대신 포커스가 첫 번째 날짜 피커로 이동하고 해당 날짜의 일정보기가 열립니다. (관련성에 대한 부분) 폼

마크 업 :

<div class="form-group"> 
    <label class="col-xs-3 control-label" for="txtSupplierList" translate>Supplier</label> 
     <div class="col-xs-4"> 
      <input class="form-control" 
        id="txtSupplierList" 
        type="text" 
        ng-model="vm.supplierName" 
        placeholder="{{'name or ID'| translate}}" 
        ng-keyup="vm.searchAppls()" /> 
     </div> 
</div><!-- @form-group --> 

<div class="form-group value"> 
    <label class="col-xs-3 control-label" for="dateFrom" translate>Created date from</label> 

    <div class="col-xs-3"> 
     <p class="input-group p-group-format"> 
      <input class="form-control" 
        type="text" 
        ng-click="open1($event,'opened1')" 
        is-open="opened1" 
        max-date="maxDate" 
        placeholder="{{'dd/mm/yyyy' | translate}}" 
        datepicker-options="dateOptions" 
        ng-required="true" 
        datepicker-popup="{{format}}" 
        ng-model="vm.from" 
        current-text="{{'Today'| translate}}" 
        toggle-weeks-text="{{'Weeks'| translate}}" 
        clear-text="{{'Clear'| translate}}" 
        close-text="{{'Close'| translate}}" 
        ng-change="vm.logicalDates(vm.from, vm.to)" /> 
        <span class="input-group-btn"> 
         <button class="btn btn-standard" ng-click="open1($event)"> 
         <i class="glyphicon glyphicon-calendar"></i> 
         </button> 
        </span> 
        <div class="value form-group pull-right" ng-if="!vm.logicalDatesBool"> 
        <div class="note note-error" translate>'From' date should preceed 'to' date</div> 
     </div> 
    </p> 
</div> 

<label class="col-xs-1 middleLabel" for="dateUntil" translate>to</label> 

<div class="col-xs-3"> 
    <p class="input-group p-group-format"> 
     <input class="form-control" 
       type="text" 
       ng-click="open2($event, 'opened2')" 
       is-open="opened2" 
       max-date="maxDate" 
       placeholder="{{'dd/mm/yyyy' | translate}}" 
       datepicker-options="dateOptions" 
       ng-required="true" 
       datepicker-popup="{{format}}" 
       ng-model="vm.to" 
       current-text="{{'Today'| translate}}" 
       toggle-weeks-text="{{'Weeks'| translate}}" 
       clear-text="{{'Clear'| translate}}" 
       close-text="{{'Close'| translate}}" 
       ng-change="vm.logicalDates(vm.from, vm.to)" /> 
       <span class="input-group-btn"> 
        <button class="btn btn-standard" ng-click="open2($event)"> 
        <i class="glyphicon glyphicon-calendar"></i> 
        </button> 
       </span> 

    </p>              
</div> 

</div><!-- form group --> 

이 (기타 옵션은 간결함을 위해 생략) 나는 내 컨트롤러에서이 코드가 2 datepickers 사이에 동작을 분할하려면 :

vm.open = open; 

    $scope.open1 = function ($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened1 = true; 
    }; 

    $scope.open2 = function ($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened2 = true; 

    }; 

폼에는 6 개의 표준 입력 필드가 더 있습니다. 특별한 입력 필드는 없으며 마지막에는 제출 버튼이 있습니다. 다시 말씀 드리 자면, 사용자가 공급 업체 텍스트 입력 또는 기타에 중점을두고 양식을 전송하는 대신 Enter 키를 누르면 (즉, 검색 결과가 반환 됨) 첫 번째 날짜 표시자가 열리고 달력. 캘린더를 Enter 키에 바인딩하는 것은 무엇입니까?

왜 이런 일이 발생하며 어떻게 해결할 수 있습니까?

Answer 1

여기에 답변이 나와 있기 때문에 내 질문에 답할 수는 있지만 제목을 찾기가 어려워서 Google의 결과에 UI-Datepicker Github에서 여러 번 버그를 수정했지만 명확하게 그렇게하지 않았습니다.

ng-keypress="keyPress($event)" 

전체 요소는 다음과 같습니다 :

<input class="form-control" 
     id="fooID" 
     ng-model="vm.foobar" 
     maxlength="100" 
     placeholder="{{'Foo name'|translate}}" 
     ng-keyup="vm.searchFunction()" 
     ng-keypress="keyPress($event)" /> 

다음

그래서, 대답은 내 입력 요소의 각각에 대해 사용자 rahil-wazir

에 의해 here이다 나는 속성을 추가 내 컨트롤러 기능에서 다음과 같은 새로운 기능을 추가했습니다.

 $scope.keyPress = function(e) { 
     // console.log(e); 
     if (e.charCode == 13) { 
      e.stopPropagation(); 
      e.preventDefault(); 
      e.bubbles = false; 
      searchFunction(); 
      return false; 
     } 
    } 

Enter 키를 누를 때 검색을 수행하기를 원했기 때문에 keyPress 함수가이를 호출합니다. datepicker와 아무 관련이 없습니다.