関連性のない入力フィールドでEnterキーを押すと、ビューストラップの日付ピッカーが開きます

Question

私は2つの日付ピッカーを 'from date'から 'to' dateまでの検索に使用しています。また、さまざまな検索条件のためのいくつかの入力フィールドと、送信ボタン。

フォーカスがテキストフィールドにあり、ユーザーが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が表示されているされていません。

だから、答えは私が属性を追加私のinput要素のそれぞれについて、ユーザがrahil-wazir

hereです：

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)" /> 

、その後、私のコントローラ機能では、次のような新しい機能を追加しました：

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

私は、Enterキーが押されたときに検索を実行したかったので、keyPress関数がそれを呼び出していました。 datepickerとは関係ありません。