我有一个 View ，其中有两个按钮。一个用于保存，另一个用于更新。:我想使用 Enter 键作为选项卡。如果到达最后一个输入和查找按钮，则将提交表单(将触发 ng-click 功能)。是否可以使用两个按钮，或者我应该只依赖一个按钮？
我尝试过:
$('#truckform input ,#truckform button').on("keypress", function(e) {
// ENTER PRESSED
if (e.keyCode == 13) {
console.log('tag')
// FOCUS ELEMENT
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
console.log(idx)
console.log(inputs.length)
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
当按钮获得焦点时，我在控制台中给出错误:
Uncaught TypeError: inputs[(idx + 1)].select is not a function
at HTMLInputElement.<anonymous> (truckEntry.js:56)
at HTMLInputElement.dispatch (jquery-2.2.3.min.js:3)
at HTMLInputElement.r.handle (jquery-2.2.3.min.js:3)
但是出错后，会触发saveData()函数。但在更新模式下， updateData() 不会被触发，并且错误一直存在，直到我按 Enter 键。我怎样才能让它发挥作用？有什么建议吗？ 我的看法:
<form name="truckform" id="truckform" novalidate>
<table id="truckformTbl">
<tr>
<td class="text-center" colspan="6">
<h4 class="ok"> Truck Entry/Exit Form</h4>
</td>
</tr>
<tr ng-hide="hideManifestDetailsInput">
<th>Manifest No : </th>
<td>
<input type="text" ng-pattern='/^[0-9]{1,10}[/]{1}([0-9]{1,2}|[(A|a)]{1})$/' required="required" ng-disabled="disbleManifestNoInpForEditMode" ng-model="ManifestNo" name="ManifestNo" id="Manifest_no" class="form-control input-sm" placeholder="Manifest No.">
<span class="error" ng-show='truckform.ManifestNo.$error.pattern'>
Input like: 256/12 Or 256/A
</span>
<span class="error" ng-show="submitted && !ManifestNo && !truckform.ManifestNo.$error.pattern">
Manifest No is required
</span>
<span class="error" ng-show="truckExceedInManifest">Manifest is full</span>
</td>
<th> Manifest Date :</th>
<td>
<input type="text" ng-model="manifest_date" required="required" name="manifest_date" id="manifest_date" class="form-control datePicker input-sm" placeholder="Manifest date">
<span ng-show="submitted && !manifest_date" class="error">Select a date</span>
</td>
<th> Goods Name :</th>
<td style="width: 15em; vertical-align: top" rowspan="8">
{{-- <select class="form-control input-sm" name="goods_id" ng-model="goods_id"
ng-options="good.id as good.id +'-'+good.cargo_name group by good.category for good in allGoodsData ">
<option value="" selected="selected">Select Goods Name</option>
</select>
<span class="error" ng-show="truckform.goods_id.$dirty && truckform.goods_id.$touched && !goods_id ">
Select at least one goods
</span>--}}
<tags-input ng-model="goods_id"
display-property="cargo_name"
placeholder="Add New Item"
replace-spaces-with-dashes="false"
add-from-autocomplete-only="true"
on-tag-added="tagAdded($tag)"
on-tag-removed="tagRemoved($tag)">
<auto-complete source="loadGoods($query)"
min-length="0"
debounce-delay="0"
max-results-to-show="10">
</auto-complete>
</tags-input>
<span ng-show="submitted && !goods_id ||goods_id.length==0" class="error">Choose at least one goods!</span>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th>Truck Type :</th>
<td>
<input type="text" ng-model="truck_type" name="truck_type" id="truck_type" class="form-control input-sm" value="{{old('truck_type')}}" placeholder="Truck Type">
<span class="error" ng-show="submitted && !truck_type">
Truck Type is required
</span>
</td>
<th> Truck No :</th>
<td>
<input type="number" min="1" required="required" ng-model="truck_no" name="truck_no" id="truckNo" class="form-control input-sm" placeholder="Truck No" value="{{old('truck_no')}}">
<span class="error" ng-show="submitted && !truck_no">
Truck No is required
</span>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th>Driver Card No :</th>
<td>
<input type="number" ng-model="driver_card" name="DriverCardNo" id="DriverCardNo" class="form-control input-sm" placeholder="Driver Card No." value="{{old('DriverCardNo')}}">
<span class="error" ng-show="submitted && !driver_card">
Driver Card No. is required
</span>
</td>
<th> Weight Bridge:</th>
<td>
<label class="radio-inline">
<input type="radio" name="fff" ng-init="weightment_flag=1" ng-model="weightment_flag" ng-checked="true" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" ng-model="weightment_flag" value="0" >No
</label>
</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<th> Driver Name :</th>
<td style="width: 15em;">
<input type="text" ng-model="driver_name" name="DriverName" id="driverName" class="form-control input-sm" placeholder="Driver Name" value="{{old('DriverName')}}">
<span class="error" ng-show="submitted && !driver_name">
Driver Name is required
</span>
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="1" class="text-center">
<br>
<button type="button" ng-click="saveData(truckform)" ng-hide="updateBtn" class="btn btn-primary btn-block center-block">
<span class="fa fa-download"></span>
Save
</button>
<button type="button" ng-click="updateData(truckform)" ng-show="updateBtn" class="btn btn-primary center-block">
<span class="fa fa-download"></span>
Update
</button>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"></td>
<td class="text-center" colspan="3">
<div id="success" class="col-md-12 alert alert-success" ng-show="successMsg">
Successfully @{{ successMsgTxt }}!
</div>
<div id="error" class="col-md-12 alert alert-warning" ng-show="errorMsg">
@{{ errorMsgTxt }}!
</div>
</td>
<td colspan="1"> </td>
</tr>
</table>
</form>
最佳答案
这里不需要为输入绑定(bind)按键事件，默认情况下，在表单中如果有按钮，并且按下回车键，就会触发第一个按钮的点击事件， 如果您的按钮类型为“提交”，并且在任何输入中按 Enter 键，它将自动触发表单提交。示例如下。
我编辑了原来的答案，现在当您按 Enter 键时它充当选项卡。这是工作fiddle
<body class="container" ng-app="myApp">
<div ng-controller="myCtrl">
<form name="truckForm" ng-submit="submit(truckForm.$valid)" class="form-horizontal container" enter-to-tab>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" name="firstname"/>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" name="lastname"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password"/>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="confirm_password" name="confirm_password"/>
</div>
<button type="submit" class="btn btn-default">{{btnFlag}}</button>
</form>
</div>
</body>
在你的 Controller 中
angular.module('myApp', [])
.controller('myCtrl', myCtrl)
.directive('enterToTab', enterToTab);
myCtrl.$inject = ['$scope'];
function myCtrl($scope) {
$scope.updateBtn = true;
$scope.submit = submit;
function submit(valid) {
console.log('hi', valid);
if ($scope.updateBtn && valid) {
updateData(/* your params if any */);
} else if (valid) {
saveData(/* your params if any */);
}
}
function saveData(/* your params if any */) {
console.log('save');
// do your save action here
}
function updateData(/* your params if any */) {
console.log('update');
// do your update action here
}
}
function enterToTab() {
return {
restrict: 'A',
link: function(scope, attrs, element) {
var elm = angular.element(element.$$element[0]);
var inputs = angular.element('input', elm);
var length = inputs.length - 1;
var submit = angular.element('button[type=submit]', elm);
inputs.on('keydown', function(e) {
if (e.which === 13) {
e.preventDefault();
var index = inputs.index(this);
if (index === length && submit.length) {
submit.focus();
} else if(index === length) {
inputs[0].focus();
} else {
inputs[index + 1].focus();
}
}
})
}
};
}
这里按钮的type="submit"很重要。当你开发 AngularJS 应用程序时，避免任何像 dom 操作这样的 jquery，所以我用 Angular 的方式用指令来做到这一点。我在 HTML 的 form 标记中添加了 enter-to-tab
关于javascript - 如何使回车键作为输入选项卡并在 angularjs 中找到按钮时提交？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44383590/