VUE 回车换行提交表单跑马灯效果只允许文本框中输入0-9数字

最新推荐文章于 2024-08-08 16:26:24 发布

HezhezhiyuLe

最新推荐文章于 2024-08-08 16:26:24 发布

阅读量903

点赞数 1

分类专栏： vue 文章标签： vue 跑马灯回车换行

本文链接：https://blog.csdn.net/HezhezhiyuLe/article/details/83614781

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

导入vue.js

<script src="vue-2.5.17.js"></script>

1.回车换行提交表单
方法一

<div id="app">

	<input type="text" v-model="name" @keydown.13="mouse(0)">{{name}}<br>
	<input type="password" v-model="pwd" @keydown.13="mouse(1)"> {{pwd}}<br>
	<input type="submit" value="heh" @click="login()" /><br>

</div>

<script>
var vm = new Vue({
	el: '#app',
	methods: {
		mouse(index) {
			var inputs = document.getElementsByTagName("input");
			inputs[index + 1].focus();
			// inputs[index + 1].select()
		},
		login() {
			alert('登录成功！')
		}
	}
})

方法二

<div id="app">

	<input type="text" v-model="name" ref="panel" @keydown.13="mouse($refs.panel)">{{name}}<br>
	<input type="password" v-model="pwd" ref="panel2" @keydown.13="mouse($refs.panel2)"> {{pwd}}<br>
	<input type="submit" value="heh" @click="login()" /><br>

</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
	// 生成一个Vue实例 
var app = new Vue({
	el: "#app",
	// el,即element。要渲染的的页面元素 
	data: {
		// 数据
		name: "",
		pwd: ""
	},
	methods: {
		mouse(e) {
			console.log(e)
			var inputs = document.getElementsByTagName("input");
			//获取登录页面的input标签 
			for(var i = 0; i < inputs.length; i++) {
				//循环input标签的数量 // 如果是最后一个，则焦点回到第一个。（这个你可以选择去掉）
				if(i == (inputs.length - 1)) {
					inputs[0].focus();
					break;
				} else if(e == inputs[i]) {
					inputs[i + 1].focus();
					break;
				}
			}
		},
		login() { //当焦点落在提交按钮上时 回车提交
			alert(1);
			// document.getElementById("myForm").submit();
		}
	}

})
</script>

2. 文本框只允许输入0-9数字
方法一

   <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

方法2

     0-9<br>
    <input type="text" @keydown="show($event)"><br>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{},
        methods:{
            show(e){//方法1 ascii码判断
                console.log(e.keyCode)
               var code= e.keyCode
                if(code>=48&&code<=57){//0-9数字对应的ascii码
                	
                }else if(code===8){  //允许文本框删除 8是删除键ascil码
                	
                }else{
                	//输入非数字按键 阻止事件发生，阻止事件默认行为
                	e.preventDefault()
                }
                
            } ,  
             show2(e){ //方法2 正则判断 删除键
                var a = e.key.replace(/[^\d]/g, "");
                if(!a){
                    e.preventDefault();
                }

            }
        }
     
    })
</script>

3. 跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
 <script src="js/vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app">
       //点击事件绑定 <br>
       <input type="button" value="浪起来" @click="lang">  
        <h4>{{msg}}</h4>
    </div>
<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            msg:'---1234567---'
        },
        methods:{
            lang(){
            	
                _this=this   //将this给到_this然后传入函数内   this就是代表当前的vue对象
                setInterval(function () {  //定时任务
                    //console.log(_this.msg);
                    var first=vm.msg.substring(0,1);
                    var end=_this.msg.substring(1);
                    _this.msg=end+first;
                },500);
            }
        }
    })
</script>
</body>
</html>