Question

我有一个带有预输入字段的表单（UI Bootstrap 2.5.0，Angularjs 1.6.9）。 它应该像这样：在用户在最后一个字段中选择选项后，下一个空的出现。用户可以通过单击每个字段旁边的删除按钮来删除任何字段。任何选项只能选择一次。

但是，如果用户没有可供选择的选项，但仍然输入内容并按Enter键-则第一行消失。

这是因为焦点从此输入字段切换到第一个删除按钮。如果从HTML禁用了delete按钮-则不会发生。如果<form>标签已从html中删除-再次不会发生。

我通过删除<form>标签来解决该问题，因为我并不是真的需要它，但是如果我不能这样做，我该如何控制焦点切换的方式？这确实给用户带来了困惑，并且让我难以调试。

https://plnkr.co/edit/D8lReA5ha6CDbPzMufdI?p=preview

表格：

<div class="modal-body">      
      <form name="linkSelectorForm">            
        <div class="panel-body">
          <div ng-repeat="link in links track by $index" class="input-group">
            <div class="form-group">
              <div class="input-group">
                <input ngFocus=""
                    class="form-control"
                    type="text"
                    ng-model="links[$index]"
                    typeahead-on-select="addNextField($item, $index, $last, $first)"
                    uib-typeahead="state for state in getStates()"
                    typeahead-min-length="0"
                    autocomplete="off"
                    typeahead-editable="false"
                    ng-model-options="{updateOn: 'blur', debounce: { 'default': 1, 'blur': 0 }}"/>
                <div class="input-group-btn">                      
                  <!--The red remove button-->
                  <button class="btn btn-danger" ng-click="removeElement($index, $last, link)">                    
                </div>                
              </div>
            </div>
          </div>
        </div>            
      </form>          
    </div>

    <div class="modal-footer">
      <button type="submit" class="btn btn-success" ng-click="ok()" ng-disabled="form.$invalid">OK
      </button>
      <button class="btn btn-danger" ng-click="cancel()">CANCEL</button>
    </div>
  </div>

当uib-typeahead没有结果时，焦点切换到按钮

0 个答案: