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:当元素获 ...
随机推荐
- [CQOI2012]组装 贪心
[CQOI2012]组装 贪心好题. LG传送门 首先有一个必须要能推的式子:设第\(i\)种零件选的生产车间位置为\(x _ i\),组装车间位置为\(x\), 则总的花费为 \[f(x) = \s ...
- 静态成员变量和静态成员函数(static)
数据成员可以分静态变量.非静态变量两种. 静态成员:静态类中的成员加入static修饰符,即是静态成员.可以直接使用类名+静态成员名访问此静态成员,因为静态成员存在于内存,非静态成员需要实例化才会分配 ...
- 最具有性价比的语言javascript之二,学习篇
先祝福各位,国庆假期愉快!前面写了一篇 最具有性价比的语言javascript之介绍篇,引起了不少的争议. 有些人javascript吐槽,埋怨.我目前做的都是后台系统.每个人的工作经历和兴趣爱好不一 ...
- 在云服务器搭建WordPress博客(一)实现云服务器与域名的绑定
随着云的兴起,越来越多的人选择在云服务器上搭建自己的博客,比较著名的开源博客管理系统当属WordPress了,那么怎么在服务器上搭建WordPress呢? 我们需要让别人能够访问我们的博客,就比如输入 ...
- Java将List<T>集合组装成树(Tree)树结构组装
把列表转换为树结构 /** * 把列表转换为树结构 * * @param originalList 原始list数据 * @param keyName 作为唯一标示的字段名称 * @return 组装 ...
- WCF 学习笔记一
wcf服务的细节: 1.新建项目的时候有wcf服务应用程序和wcf服务库,两者区别在于前者可以寄宿在IIS上,而后者只能给其他项目使用,可以寄宿在控制台程序.窗体程序等等. 相关定义的链接 http: ...
- node安装和npm全局配置
本文章环境 windows10 64位家庭版 Node10.15.3LTS 安装包下载 Node官网 安装node 点击安装文件, 一键安装, 注意安装位置和添加到环境变量(xx to PATH)选项 ...
- 分析(function(window, undefined) {})(window)
有的时候,我们会在JS框架中看到这行 (function(window, undefined) {})(window) ,它是做什么用的,我们来分析下它 首先这就是一个匿名函数,立即执行它 (func ...
- CHAPTER 7 Science in Islam 第7章 伊斯兰中的科学
CHAPTER 7 Science in Islam 第7章 伊斯兰中的科学 Galen did not live to see the decline of the Roman Empire, bu ...
- 高可用OpenStack(Queen版)集群-14.Openstack集成Ceph准备
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...