angularjs在回车时将焦点移动到下一个控件
最好的方法是，在表单中按enter键时，将焦点转到下一个输入，而不是使用angularjs提交表单angularjs在回车时将焦点移动到下一个控件,angularjs,Angularjs,最好的方法是，在表单中按enter键时，将焦点转到下一个输入，而不是使用angularjs提交表单 我有一个有很多字段的表单，客户习惯于按enter键进入下一个输入（从桌面应用程序提交）。当用户点击enter时，angularjs保存表单。我想改变这个。有可能吗？我建议制定一个自定义指令。像这样的。我还没有测试过这个 .directive（'focus'，function（）{ 返回{ 限制：“A”， 链接：函数（$scope、elem、attrs）{ 元素绑定（'keydown'，函数（e）{
我有一个有很多字段的表单，客户习惯于按enter键进入下一个输入（从桌面应用程序提交）。当用户点击enter时，angularjs保存表单。我想改变这个。有可能吗？我建议制定一个自定义指令。像这样的。我还没有测试过这个
.directive（'focus'，function（）{
返回{
限制：“A”，
链接：函数（$scope、elem、attrs）{
元素绑定（'keydown'，函数（e）{
var代码=e.keyCode | | e.which；
如果（代码===13）{
e、 预防默认值（）；
元素next（）.focus（）；
}
});
}
}
});
这样的办法应该行得通。你可能得做点什么。祝你好运。我尝试了这个解决方案。正如广告所说，它需要一些调整。以下是最终对我有用的东西：
.directive("focus", function () {
return {
restrict: "A",
link: function ($scope, elem, attrs) {
var focusables = $(":focusable");
elem.bind("keydown", function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
var current = focusables.index(this);
var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
next.focus();
e.preventDefault();
}
});
}
}
请注意，为了使
：focusableangular.module（'myApp'）。指令（“nextFocus”，nextFocus）；
/**用法：
按ENTER键后，指令将焦点切换到
下一个字段id，例如field2
最后一个字段不应具有要避免的next focus指令
关注不存在的元素。
适用于Web、iOS（Go按钮）和Android（Next按钮）浏览器，
**/
函数nextFocus（）{
var指令={
限制：“A”，
链接：功能（范围、要素、属性）{
元素绑定（'keydown'，函数（e）{
var partsId=attrs.id.match（/field（\d{1}）/）；
var currentId=parseInt（partsId[1]）；
var代码=e.keyCode | | e.which；
如果（代码===13）{
e、 预防默认值（）；
document.querySelector（'#field'+（currentId+1））.focus（）；
}
});
}
};
返回指令；
}/**用法：
按ENTER键后，指令将焦点切换到
下一个字段id，例如field2
最后一个字段不应具有要避免的next focus指令
关注不存在的元素。
适用于Web、iOS（Go按钮）和Android（Next按钮）浏览器，
**/
var指令={
限制：“A”，
链接：功能（范围、要素、属性）{
元素绑定（'keydown'，函数（e）{
var代码=e.keyCode | | e.which；
如果（代码===13）{
试一试{
if（attrs.tabindex！=未定义）{
var currentTabIndex=attrs.tabindex；
var nextTabIndex=parseInt（attrs.tabindex）+1；
$（“[tabindex=“+nextTabIndex+”]）。focus（）；
}
}捕获（e）{
}
}
});
}
};
返回指令；
});
angular.module('app').directive('tabNext', function () {
return {
restrict: 'A',
link: function (scope, elem) {
elem.bind('keyup', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
var eIDX = -1;
for (var i = 0; i < this.form.elements.length; i++) {
if (elem.eq(this.form.elements[i])) {
eIDX = i;
break;
}
}
if (eIDX === -1) {
return;
}
var j = eIDX + 1;
var theform = this.form;
while (j !== eIDX) {
if (j >= theform.elements.length){
j = 0;
}
if ((theform.elements[j].type !== "hidden") && (theform.elements[j].type !== "file")
&& (theform.elements[j].name !== theform.elements[eIDX].name)
&& (! theform.elements[j].disabled)
&& (theform.elements[j].tabIndex >= 0)) {
if (theform.elements[j].type === "select-one") {
theform.elements[j].focus();
} else if (theform.elements[j].type === "button") {
theform.elements[j].focus();
} else {
theform.elements[j].focus();
theform.elements[j].select();
}
return;
break;
}
j++;
}
}
});
}
}});
angular.module（'app'）。指令（'tabNext'，函数（）{
返回{
限制：“A”，
链接：功能（范围、要素）{
元素绑定（'keyup'，函数（e）{
var代码=e.keyCode | | e.which；
如果（代码===13）{
e、 预防默认值（）；
var-eIDX=-1；
for（var i=0；i=form.elements.length）{
j=0；
}
if（（theform.elements[j].type！=“hidden”）&&（theform.elements[j].type！=“file”）
&&（theform.elements[j].name！==theform.elements[eIDX].name）
&&（！theform.elements[j].已禁用）
&&（form.elements[j].tabIndex>=0）{
if（theform.elements[j].type==“选择一个”）{
form.elements[j].focus（）；
}else if（form.elements[j].type==“button”）{
form.elements[j].focus（）；
}否则{
form.elements[j].focus（）；
form.elements[j].select（）；
}
返回；
打破
}
j++；
}
}
});
}
}});
.directive('nextOnEnter', function () {
return {
restrict: 'A',
link: function ($scope, selem, attrs) {
selem.bind('keydown', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
var pageElems = document.querySelectorAll('input, select, textarea'),
elem = e.srcElement || e.target,
focusNext = false,
len = pageElems.length;
for (var i = 0; i < len; i++) {
var pe = pageElems[i];
if (focusNext) {
if (pe.style.display !== 'none') {
angular.element(pe).focus();
break;
}
} else if (pe === elem) {
focusNext = true;
}
}
}
});
}
}
})
指令（'nextOnEnter'，函数（）{
返回{
限制：“A”，
链接：函数（$scope、selem、attrs）{
selem.bind（'keydown'，函数（e）{
var代码=e.keyCode | | e.which；
如果（代码===13）{
e、 预防默认值（）；
var pagelems=document.querySelectorAll（'input，select，textarea'），
elem=e.src元素| | e.target，
focusNext=false，
len=pagelems.长度；
对于（变量i=0；iangular.module('app').directive('tabNext', function () {
return {
restrict: 'A',
link: function (scope, elem) {
elem.bind('keyup', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
var eIDX = -1;
for (var i = 0; i < this.form.elements.length; i++) {
if (elem.eq(this.form.elements[i])) {
eIDX = i;
break;
}
}
if (eIDX === -1) {
return;
}
var j = eIDX + 1;
var theform = this.form;
while (j !== eIDX) {
if (j >= theform.elements.length){
j = 0;
}
if ((theform.elements[j].type !== "hidden") && (theform.elements[j].type !== "file")
&& (theform.elements[j].name !== theform.elements[eIDX].name)
&& (! theform.elements[j].disabled)
&& (theform.elements[j].tabIndex >= 0)) {
if (theform.elements[j].type === "select-one") {
theform.elements[j].focus();
} else if (theform.elements[j].type === "button") {
theform.elements[j].focus();
} else {
theform.elements[j].focus();
theform.elements[j].select();
}
return;
break;
}
j++;
}
}
});
}
}});
.directive('nextOnEnter', function () {
return {
restrict: 'A',
link: function ($scope, selem, attrs) {
selem.bind('keydown', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
var pageElems = document.querySelectorAll('input, select, textarea'),
elem = e.srcElement || e.target,
focusNext = false,
len = pageElems.length;
for (var i = 0; i < len; i++) {
var pe = pageElems[i];
if (focusNext) {
if (pe.style.display !== 'none') {
angular.element(pe).focus();
break;
}
} else if (pe === elem) {
focusNext = true;
}
}
}
});
}
}
})
/** Usage:
<input next-focus tabindex="0">
<input next-focus tabindex="1">
<input tabindex="2">
Upon pressing ENTER key the directive will switch focus to
the next tabindex.
The last field should not have next-focus directive to avoid
focusing on non-existing element.
Works for Web, iOS (Go button) & Android (Next button) browsers,
**/
app.directive('nextFocus', [function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.bind('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
try {
if (attrs.tabindex !== undefined) {
var currentTabeIndex = attrs.tabindex;
var nextTabIndex = parseInt(currentTabeIndex) + 1;
var elems = document.querySelectorAll("[tabindex]");
for (var i = 0, len = elems.length; i < len; i++) {
var el = angular.element(elems[i]);
var idx = parseInt(el.attr('tabindex'));
if (idx === nextTabIndex) {
elems[i].focus();
break;
}
}
}
} catch (e) {
console.log('Focus error: ' + e);
}
}
});
}
};
}]);
<table class="table table-striped table-bordered table-hover">
<tr>
<th>S No</th>
<th>Stock Id</th>
<th>Description</th>
<th>Qty</th>
<th>UOM</th>
<th>Rate</th>
<th>Amount</th>
<th>Add</th>
<th>Delete</th>
</tr>
<tr ng-repeat="item in stockitems">
<td>{{$index + 1}}</td>
<td>
<input type="text" style="width:70px" id="stkid{{$index}}" class="form-control" name="stockid" required insert="Addnewrow();" ng-keyup="moveFocus('desc','amount','stkid','stkid',$index,$event)" ng-blur="getStockitem($index);" typeahead="a.stockitem_code as (a.stockitem_code +' | ' + a.stockitem_name +' | '+ a.rate) for a in stock | filter:$viewValue | limitTo:8" data-ng-model="item.stockid" rows="3" />
</td>
<td>
<input type="text" class="form-control" id="desc{{$index}}" name="description" ng-keyup="moveFocus('quantity','stkid','desc','desc',$index,$event)" data-ng-model="item.description" rows="3" />
</td>
<td>
<input type="text" style="width:70px" id="quantity{{$index}}" class="form-control" ng-keyup="moveFocus('uom','desc','quantity','quantity',$index,$event)" ng-change="GetAmount($index,'qty');" ng-pattern="/^\d+$/" required name="qty" data-ng-model="item.qty" rows="3" />
</td>
<td>
<input type="text" style="width:70px" id="uom{{$index}}" class="form-control" name="uom" ng-keyup="moveFocus('rate','quantity','uom','uom',$index,$event)" data-ng-model="item.uom" required rows="3" />
</td>
<td>
<input type="text" style="width:70px" id="rate{{$index}}" class="form-control" name="rate" ng-keyup="moveFocus('amount','uom','rate','rate',$index,$event)" required data-ng-model="item.rate" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" ng-change="GetAmount($index,'rate');" rows="3" />
</td>
<td>
<input type="text" style="width:70px" id="amount{{$index}}" class="form-control" ng-keyup="moveFocus('stkid','rate','amount','amount',$index,$event)" name="amount" required data-ng-model="item.amount" rows="3" />
</td>
<td><span ng-click="AddEstimation($index);"><a>Add</a></span></td>
<td><span ng-click="DeleterowEstimation($index);"><a>Delete</a></span></td>
</tr>
</table>
$scope.moveFocus = function (nextId,prevId,downId,upId,index,event) {
debugger;
if (event.keyCode == 39) {
nextId = nextId + index;
$('#' + nextId).focus();
}
else if(event.keyCode == 37)
{
prevId = prevId + index;
$('#' + prevId).focus();
}
else if(event.keyCode == 38)
{
upId = upId + (index - 1);
$('#' + upId).focus();
}
else if(event.keyCode == 40)
{
downId = downId + (index + 1);
$('#' + downId).focus();
}
else if(event.keyCode==13)
{
if (nextId == "desc") {
nextId = "quantity" + index;
$('#' + nextId).focus();
}
else if(nextId == "uom")
{
nextId = "stkid" + (index + 1);
$('#' + nextId).focus();
}
}
};
starter.directive('focustonext', function () {
return {
restrict: 'A',
link: function ($scope, selem, attrs) {
selem.bind('keydown', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
var pageElems = document.querySelectorAll('input, select, textarea'),
elem = e.srcElement || e.target,
focusNext = false,
len = pageElems.length;
for (var i = 0; i < len; i++) {
var pe = pageElems[i];
if (focusNext) {
if (pe.style.display !== 'none') {
document.getElementById(pe.id).focus();
break;
}
} else if (pe === elem) {
focusNext = true;
}
}
}
});
}
}
});