Question

我有2个日期选择器，'从'日期和'到'搜索日期。还有一些用于不同搜索条件的输入字段和一个提交按钮。

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

要在两个日期选择器之间划分行为，我在我的控制器中有一个代码（为简洁省略了选项等）：

 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

回答我自己的问题，因为这里有答案，但是他们有标题让他们很难找到，谷歌的结果显示了UI-Datepicker Github他们声称在多个场合修复了这个bug但显然还没有这样做。

因此，用户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)" />

然后在我的Controller函数中添加了一个像这样的新函数：

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

正如您所看到的，我还想在按下Enter键时执行搜索，因此keyPress函数会调用它。与datepicker无关。

当用户在不相关的输入字段上按Enter键时，Angular bootstrap datepickers打开

1 个答案: