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

时间:2017-10-13 11:49:07

标签: angularjs twitter-bootstrap datepicker

我有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键?

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

1 个答案:

答案 0 :(得分:0)

回答我自己的问题,因为这里有答案,但是他们有标题让他们很难找到,谷歌的结果显示了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无关。