Vue以及JS键盘阻止事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue以及JS键盘阻止事件</title><script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script&...

小仓桑

3549人浏览 · 2020-03-31 10:31:53

小仓桑 · 2020-03-31 10:31:53 发布

键盘按下事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue以及JS键盘阻止事件</title>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	</head>
	<body>
		<div id="app">
			Vue：<input type="text" v-on:keydown="fun($event)" />
            //.enter   .tab   .delete (捕获“删除”和“退格”键)   .esc  .space  .up   .down   .left  .right都可以捕获
            Vue：<input type="text" @keydown.enter="fun2" />
			传统Js：<input type="text" onkeydown="fun1()" />
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el:"#app",
			data:{
				link:"https://www.baidu.com",
			},
			methods:{
				fun:function(event){
					var keycode = event.keyCode ;
					if (keycode < 48 || keycode > 57) {
						event.preventDefault();	
					}
				},
                fun2:function(){
					alert("按下的是回车")
				}
			}
		})
		//传统JS的键盘按下事件
		function fun1(){
			var keycode = event.keyCode ;
			if (keycode < 48 || keycode > 57) {
				event.preventDefault();	
			}
		}
	</script>
</html>

鼠标悬停事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:mouseover</title>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- @mouseover为v-on:mouseover缩写方式 -->
			<div @mouseover="fun1" id="div1">
				<textarea v-on:mouseover.stop="fun3($event)">这是一个文件域</textarea>
			</div>
			<br />
			<div onmouseover="divmouseover()" id="div2">
				<textarea onmouseover="fun2()">这是一个文件域</textarea>
			</div>
		</div>
		<style type="text/css">
			#div2{
				background-color: red;
				width: 300px;
				height: 300px;
			}
			#div1{
				background-color: yellow;
				width: 300px;
				height: 300px;
			}
		</style>
	</body>
	<script type="application/javascript">
		new Vue({
			el:"#app",
			data:{
			},
			methods:{
				fun1:function(){
					alert("鼠标悬停到div上");
				},
				fun3:function(event){
					alert("鼠标悬停到textarea上");
					//阻止此程序以下操作
                    //加v-on:mouseover.stop的话可以省略以下代码
					event.stopPropagation();
				}
			}
		});
		
		//传统的JS方式
		function divmouseover(){
			alert("鼠标移动到div上")
		}
		function fun2(){
			alert("鼠标移动到textarea上");
			//阻止此程序以下操作
			event.stopPropagation();
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:mouseover</title>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="div1"></div>
			<div id="div2"></div>
			<div v-text="message"></div>
			<div v-html="message"></div>
			<font size="5" v-bind:color="ys1">老赵</font>
			<font size="5" :color="ys2">老刘</font>
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el:"#app",
			data:{
				message:"<h1>嘻嘻嘻</h1>",
				//要想给HTML标签的属性设置变量的值，需要使用v-bind
				//v-bind也可以简化 直接使用：
				ys1:"red",
				ys2:"green"
			},
			methods:{
			}
		});
		//传统的JS方式
		window.onload = function(){
			document.getElementById("div1").innerHTML="<h1>Hello</h1>"
			document.getElementById("div2").innerText="<h1>Hello</h1>"
		}
	</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^