gpt4 book ai didi

angularjs - 当字段值达到最大长度时如何聚焦到下一个字段

转载 作者:行者123 更新时间:2023-12-01 23:00:20 25 4
gpt4 key购买 nike

我有一个场景,我有两个或多个 textarea,当用户在 textarea 中输入值并且当值达到 max-length 例如 ng-max-length 为 15 时,焦点应自动移动到下一个文本区域。

如何做到这一点?

为了控制最大长度,我从这个 link 中得到了解决方案.

但我不知道如何自动聚焦到下一个元素

下面我给出了我尝试过的代码

textarea.html

<!DOCTYPE html>

<html>
<head>
<title>Angular App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-app="taApp">
<div ng-controller="taController">
<textarea my-maxlength="15" ng-model="ta1.text1" rows="4" cols="20"> </textarea>
<textarea my-maxlength="15" ng-model="ta2.text2" rows="4" cols="20"> </textarea>

<textarea my-maxlength="15" ng-model="ta3.text3" rows="4" cols="20"> </textarea>
</div>
</div>

<script src="js/libs/angularjs-1.0.2/angular.js" type="text/javascript"></script>
<script src="js/controller/pageController.js" type="text/javascript"></script>
<script src="js/controller/textAreaFocus.js" type="text/javascript"></script>
</body>
</html>

textAreaFocus.js
angular.module('textareafocus',[]).directive('myMaxlength', function() {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
var maxlength = Number(attrs.myMaxlength);
function fromUser(text) {
if (text.length > maxlength) {
var transformedInput = text.substring(0, maxlength);
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();

return transformedInput;
}
return text;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});

pageController.js
var taApp = angular.module('taApp',["textareafocus"]); // this creates a new angular module named "myApp";

taApp.controller('taController', function ($scope,$http) {

$scope.ta1 = { text1: 'TextArea 1'};

$scope.ta2 = { text2: 'TextArea 2'};

$scope.ta3 = { text3: 'TextArea 3'};

});

截图

enter image description here

目前我只有 3 个 textarea 但它可能更多,因此焦点应该自动移动到下一个元素。

我尝试使用 element[1].focus() 但它不起作用。

请帮助我如何解决这个问题。

最佳答案

你可以实现一个自定义指令,它需要 jQuery 来查找其他文本区域,ngMaxlength 来确定最大长度(这可以更改为自定义属性),以及 tabindex 来确定 Tab 键顺序:

指令

app.directive('autoNext', function() {
return {
restrict: 'A',
link: function(scope, element, attr, form) {
var tabindex = parseInt(attr.tabindex);
var maxLength = parseInt(attr.ngMaxlength);
element.on('keypress', function(e) {
if (element.val().length > maxLength-1) {
var next = angular.element(document.body).find('[tabindex=' + (tabindex+1) + ']');
if (next.length > 0) {
next.focus();
return next.triggerHandler('keypress', { which: e.which});
}
else {
return false;
}
}
return true;
});

}
}
});

HTML
<textarea ng-maxlength="10" tabindex="1" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="2" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="3" auto-next></textarea>

Demo Fiddle

关于angularjs - 当字段值达到最大长度时如何聚焦到下一个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25348132/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com