当用户按下无关输入域上的Enter键时，角度引导日期选择器打开

问题描述：

我有2个日期选择器，'from'日期和'to'日期用于搜索。还有一些输入字段适用于不同的搜索条件以及一个提交按钮。当用户按下无关输入域上的Enter键时，角度引导日期选择器打开

当焦点位于文本字段上并且用户按下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键？

为什么会发生这种情况，我该如何解决？

答

回答我自己的问题，因为这里有SO的答案，但他们有标题，使他们很难找到，谷歌的结果显示UI-Datepicker Github他们声称已多次修复此错误，但显然有没有这样做。

所以，答案是here用户rahil-wazir

对于我的每个输入元素我添加的属性：

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函数会调用它。与日期选择器无关。

当用户按下无关输入域上的Enter键时，角度引导日期选择器打开

相关推荐