angular 调用element的 onfocus onkeydown onblur等事件
项目里要实现一个input验证通过就切换到下一个input的功能
当然用jq dom操作很简单 ,大家都懂,现在用 angular,mvc 数据模型控制分离,不想再dom操作怎么办
以下方法
<textarea style="height: 73px;min-height: 73px;resize: none "
type="text"
focus-me="item.Bake.FocusNext"
maxlength="500"
ng-model="item.Bake.PromoText" />
app.directive('focusDir',[ "$timeout","$parse" ,function($timeout,$parse) {
return {
link: function($scope, element, attrs) {
var model = $parse(attrs.focusDir);
$scope.$watch(model, function(value) {
// console.log('value=',value);
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// to address @blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function() {
// console.log('blur');
$scope.$apply(model.assign($scope, false));
});
}
};
}] );
//Tip:记得 引入"$timeout","$parse"
这个事focus ,类似的 大家可以用于kedown keyup等等
引用:http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field
angular 调用element的 onfocus onkeydown onblur等事件的更多相关文章
- [转载]浏览器事件window.onload、onfocus、onblur、ons
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- 真正让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦
转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...
- 搜索框请输入关键字 onfocus 和 onblur
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 事件类型(onfocus和onblur)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用onfocus与onblur实现搜索框附加信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Angular 调用百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
- Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
- ReactiveX 学习笔记(18)使用 RxJS + Angular 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- js焦点事件:onfocus、onblur、focus()、blur()、select()
焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入只有能够响应用户操作额元素才可以接收焦点事件,比如:a button input... onfocus:当元素获 ...
随机推荐
- 设置 idea 运行前不去检查其他类的错误的方法
问题描述 MainClass为要运行的正常类,目录下存在一个类ErrorClass有错误,运行MainClass时会无法运行. 现在需要忽略ErrorClass中的错误,执行MainClass中的代码 ...
- Object C学习笔记1-基本数据类型说明
Objective-C数据类型可以分为:基本数据类型.对象类型和id类型.基本数据类型有:int.float.double和char类型.对象类型就是类或协议所声明的指针类型,例如:NSAutorel ...
- 菜鸟vimer成长记——第2.1章、normal模式
目的 掌握normal模式下常用操作的语法和概念,这些操作对应的应用场景以及实用技巧. 通过normal模式举一反三掌握cmd-line和visual的常用文本操作. 简介 文本操作的理想状态为:一个 ...
- 3.PO如何给开发团队讲好故事
敏捷开发系列文章目录 讲出符合开发团队味口的故事. 上一章说了敏捷开发团队的构成与迭代过程,本章重点说一下迭代第一天的计划会议.熟话说“好的开始就成功了一半”,一个迭代的计划会议做得好不好确实直接注定 ...
- Win10家庭版无法打开策略组问题
Win10家庭版无法打开策略组问题 • 复制以下代码至记事本中 @echo off pushd "%~dp0" *.mum >List.txt *.mum >>L ...
- 第一章 HTML介绍
1.1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就 ...
- Scrum立会报告+燃尽图(Final阶段第一次)
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2480 项目地址:https://coding.net/u/wuyy694 ...
- 第九次psp例行报告
本周psp 本周进度条 代码累积折线图 博文字数累积折线图 饼状图
- 11.15 Daily Scrum
今天是假期回来的第一个周末,也是我们团队的又一次进度汇总总结和调试工作开展,鉴于一周以来大家的工作有了很大的成果,所以,本次召开的会议主旨在于解决一些开发方面的细节问题,达成共识,为日后进一步的功能方 ...
- java第三次试验报告
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1353 姓名:郭皓 学号:20135327 成绩: 指导 ...