我的控制器中有一个对象变量(var myObject),在IHM中分为3个输入文本.
我想在焦点到达maxLength时自动将焦点更改为下一个输入.
var myObject = { part1:"",part2:"",part3:"" } <form> <input type="text" id="part1" ng-model="myObject.part1" maxlength="7"/> <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> </form>
解决方法
你需要使用一个指令:
app.directive("moveNextOnMaxlength",function() { return { restrict: "A",link: function($scope,element) { element.on("input",function(e) { if(element.val().length == element.attr("maxlength")) { var $nextElement = element.next(); if($nextElement.length) { $nextElement[0].focus(); } } }); } } });
并按如下方式更新您的表单:
<form> <input type="text" id="part1" ng-model="myObject.part1" maxlength="7" move-next-on-maxlength /> <input type="text" id="part2" ng-model="myObject.part2" maxlength="12" move-next-on-maxlength /> <input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/> </form>
您可以将指令移动到< form>而不是build元素,但是build-int jqLite的find()方法会限制您只按标记名称查找元素.如果你正在使用完整的jQuery,或者可以使用vanillaJS,我建议使用这种方法.
原文地址:https://www.jb51.cc/js/152730.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。