Vue键盘事件@keydown

和于获取键盘输入信息

@keydown事件

<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(ev){
							//keyCode是获取键盘码
							alert(ev.keyCode);
						}
					}
				});
			};
		</script>




<div id="box">
			<!--
            	时间:2018-02-28
            	描述:@keydown键盘事件
            -->
			<input type="text" @keydown="show($event)" />
		</div>

@keyup事件

@keyup与@keydown没有太大区别,区别在于响应时间的前后。
<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(ev){
							//keyCode是获取键盘码
							alert(ev.keyCode);
						}
					}
				});
			};
		</script>




<div id="box">
			<input type="text" @keyup="show($event)" />
		</div>

针对某一键码快束操作

如我们想监测用户是否按了回车,除了用$event事件检测后,用if进行判断外,还可以用Vue的快速方法
<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(){
							//keyCode是获取键盘码
							//if(ev.keyCode == 13){
								alert("回车");
							//}
						}
					}
				});
			};
		</script>






<div id="box">
			<!--
            	时间:2018-02-28
            	描述:@keyup.13这样就可以快速的监测是否按了回一个键
            -->
			<input type="text" @keyup.13="show()" />
		</div>

常用按键的监测

Vue对常用输入的进行了与键盘名一样的监测,常用的有
<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(){
							//keyCode是获取键盘码
							//if(ev.keyCode == 13){
								alert("按了键");
							//}
						}
					}
				});
			};
		</script>


<div id="box">
			<!--
            	时间:2018-02-28
            	描述:@keyup.enter Vue对常用输入的进行了与键盘名一样的监测,常用的有
            		@keyup/keydown.left
            		@keyup/keydown.right
            		@keyup/keydown.up
            		@keyup/keydown.down
            -->
			<input type="text" @keyup.enter="show()" />
		</div>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND