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:当元素获 ...
随机推荐
- set方法在set传入值时报空指针异常,直接设置定值即可
这种情况可能跟上下的程序有关,所以直接设置定值传入即可. 例如: re.setRid(ar.getRid()); // 这个是报错代码 md.setConnMailStatusTrue(ar.getR ...
- window.location.hash 页面跳转,精确定位,实例展示:
window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template&quo ...
- Sqlite数据库sqlite3命令小记
SQLite库包含一个名字叫做sqlite3的命令行,它可以让用户手工输入并执行面向SQLite数据库的SQL命令.本文档提供一个样使用sqlite3的简要说明. 开始 启动sqlite3程序,仅仅需 ...
- C语言 知识点总结完美版
本文采用思维导图的方式撰写,更好的表述了各知识点之间的关系,方便大家理解和记忆.这个总结尚未包含C语言数据结构与算法部分,后续会陆续更新出来,文中有漏掉的知识点,还请大家多多指正. 总体上必须清楚的: ...
- JMeter的__threadGroupName使用注意事项
JMeter从4.1版本开始引入了一个新函数"${__threadGroupName}",这个函数的作用是返回当前线程组的名字.${__threadGroupName}的用途也较为 ...
- canvas反向裁剪技巧
我们都知道在canvas 可以通过clip来实现剪裁功能,其步骤一般是先设置要裁剪的区域(路径),然后通过ctx.clip()的实现裁剪,裁剪之后,后续的绘制只能在裁剪的区域显示效果,比如如下一段代码 ...
- Linux Ubuntu 安装、汉化、常用操作
一.安装Ubuntu Desktop 安装前准备 现在的PC机都可以满足要求. 软件准备 vmware:http://www.vmware.com/cn ubuntu:18ubuntu Desktop ...
- python-gevent模块实现socket大并发
服务器端:gevent_server.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- python-模拟掷骰子,两个筛子数据可视化
""" 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...
- [salt] jinja模板中变量使用pillar的几种方法
先转载下jinja模板中使用变量的方法,后文主要讲解pillar的变量使用方法 一.jinja模版的使用方法: 1.file状态使用template参数 - template:jinja 2.模版文件 ...