按回车选择下拉值直接提交表单答案

【问题标题】：Pressing enter for selection of a dropdown value directly submits form按回车选择下拉值直接提交表单
【发布时间】：2015-04-20 07:05:20
【问题描述】：

我正在使用 ui-select，每当我按 Enter 键选择一些搜索结果时，都会选择结果并直接提交表单。不知道是什么问题。

这是我正在使用的 HTML

<form>
    <div class="form-group">
        <label class="col-sm-3 control-label">Address</label>
        <div class="col-sm-5">
            <input type="text" ng-model="address.street" class="form-control"  placeholder="e.g. NUST Campus, H-12">        
            <div class="form_wrapper_error">
                <p ng-show='addressError'>{{addressError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">City/Town</label>
        <div class="col-sm-5">
            <!-- <location-autocomplete bind-value="address.city" coordinates="cityAddInitialCoordinates" placeholder="e.g. Islamabad"> -->
            <ui-select ng-model="$parent.address.city"
                theme="select2"
                reset-search-input="true"
                title="Select City">
                <ui-select-match allow-clear="true" placeholder="Select City">{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="city as city in cities track by $index"
                    refresh="refreshLocation($select.search)"
                    refresh-delay="0">
                    <div ng-bind-html="city | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            <div class="form_wrapper_error">
                <p ng-show='cityError'>{{cityError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Zip</label>
        <div class="col-sm-5">
            <input type="text"  ng-model="address.zip" class="form-control"  placeholder="e.g. 44000">
            <div class="form_wrapper_error">
                <p ng-show='zipError'>{{zipError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <button class="btn btn-primary buttt" ng-click="addAddress()">Add Address</button>
        </div>
    </div>
</form>

【问题讨论】：

如果您发布所有与表单相关的代码会更好，也包括表单标签
它的正常表单行为，它在输入时提交表单，基本上你需要通过编写指令来防止输入点击事件
是的，这是正常行为，但 select2 和 ui-select2 与 enter 进行选择时可以正常工作。为什么我需要编写指令（针对表单或特别是 ui-select 项）？
@MuhammadRaza 因为你的 ui-select 已经换行了。ui-select2 & ui-select 完全不同
您需要将其设为特定字段..我认为您将该事件应用于整个窗口，这很混乱

标签： angularjs ui-select angular-ui-select

【解决方案1】：

找到的解决办法：我用的是<button>，按钮的默认类型是提交，所以我必须指定type="button"，问题就解决了....

参考：Found in UI-Select Pull Requests...

【讨论】：

【解决方案2】：

如果有人仍然在解决这个问题，我找到了解决方案\解决方法。像这样将skip-focusser="true" 添加到您的 ui-select 中：

<ui-select ng-model="$parent.ngModel" theme="bootstrap" class="input-xs" skip-focusser="true">
<ui-select-match >{{$select.selected.description}}</ui-select-match>
<ui-select-choices repeat="item in options | orderBy :'code' | filter: $select.search">
   <div ng-bind-html="item.description | highlight: $select.search"></div>
</ui-select-choices>

这将从选择元素中移除焦点，因此 Enter 键不会重新打开下拉菜单。

【讨论】：