您的位置：首页 > Web前端 > AngularJS

使用angularjs的键盘事件来增强用户体验

2016-10-26 14:12 405 查看

绑定键盘事件（尤其注意：不能用a标签，不然会失效）

推荐button
方法一：ng内置指令

<code class="bash"><button ng-click=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> ng-keypress=<span class="hljs-string" style="color: rgb(0, 136, 0);">"todoSomething(<span class="hljs-variable" style="color: rgb(102, 0, 102);">$event</span>)"</span> class=<span class="hljs-string" style="color: rgb(0, 136, 0);">"btn btn-success btn-lg"</span> ng-disabled=<span class="hljs-string" style="color: rgb(0, 136, 0);">"loginForm.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$invalid</span>"</span>>
登录
</button></code>

说明：在对应的控制器中的$scope上绑定一个todoSomething方法

<code class="php">  <span class="hljs-variable" style="color: rgb(102, 0, 102);">$scope</span>.todoSomething=<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(<span class="hljs-variable">$event</span>)</span></span>{
<span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102);">$event</span>.keyCode==<span class="hljs-number" style="color: rgb(0, 102, 102);">13</span>){<span class="hljs-comment" style="color: rgb(136, 0, 0);">//回车</span>
login();
}
}</code>

方法二：自定义指令

html

<code class="scala"><button ng-click=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> ng-enter=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> <span class="hljs-class"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">class</span>=</span><span class="hljs-string" style="color: rgb(0, 136, 0);">"btn btn-success btn-lg"</span> ng-disabled=<span class="hljs-string" style="color: rgb(0, 136, 0);">"loginForm.$invalid"</span>>
登录
</button></code>

指令

<code class="php">myApp.directive(<span class="hljs-string" style="color: rgb(0, 136, 0);">'ngEnter'</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
<span class="hljs-keyword" style="color: rgb(0, 0, 136);">return</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">(scope, element, attrs)</span> </span>{
element.bind(<span class="hljs-string" style="color: rgb(0, 136, 0);">"keydown keypress"</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
<span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (event.which === <span class="hljs-number" style="color: rgb(0, 102, 102);">13</span>) {
scope.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$apply</span>(<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
scope.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$eval</span>(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});</code>

总结：两种方法都能实现敲回车登录的功能，不过推荐指令的方式，对$scope的污染比较低

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs

相关文章推荐

新的分享

章节导航