ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

input输入框相关事件整理

2021-04-07 15:52:25  阅读:210  来源: 互联网

标签:console log inputVal 输入框 事件 整理 input data


@input实时监听输入数据

<input type="text" placeholder="实时监听" v-model="inputVal" @input="inputFn">
data: {
    inputVal:'' 
},
methods: {
  //实时监听
    inputFn(e){
        console.log(e.data);
    }
},


打印出的数据:

监听数据并传参

@input事件想要传递一个参数到方法中 但是同时还要保留原来返回的event

解决方法:$event

<input type="text" placeholder="实时监听" v-model="inputVal" @input="inputFn($event,123)">
var app = new Vue({
    el: '#app',
    data: {
        inputVal:'' 
    },
    methods: {
        inputFn(e,num){
            console.log(e.data); //实时输入的值
            console.log(num); //传参值
        }
    },
})

打印的数据:

注意要区分 实时监听的值传参值输入框的值

<input type="text" placeholder="实时监听" v-model="inputVal" @input="inputFn($event,123)">
<script>
var app = new Vue({
    el: '#app',
    data: {
        inputVal:'' 
    },
    methods: {
        inputFn(e,num){
            console.log(e.data); //实时输入的值
            console.log(num); //传参值
            console.log(this.inputVal); //输入框的值
        }
    },
})
</script>


打印数据:

侦听属性watch监听值变化

<div id="app">
    <input type="text" placeholder="实时监听" v-model="inputVal">
</div>
<script>
  var app = new Vue({
      el: '#app',
      data: {
          inputVal:'' 
      },
      watch:{
          inputVal(curVal,oldVal){
              console.log(curVal);
              console.log(oldVal);
          }
      },
  })
</script>


打印的数据:

获取焦点和失去焦点

@blur 是当元素失去焦点时所触发的事件

@focus是元素获取焦点时所触发的事件

@keyup.enter

该事件与v-on:input事件的区别在于:input事件是实时监控的,每次输入都会调用,而@keyup.enter事件则是在pc上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。

@change

该事件和enter事件相似,在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

注:在ios手机上会出现问题:
如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询,这时在安卓手机上没有问题,但是在ios手机上会出现多次触发的情况。
简单的解决办法:
对input的值进行监听(watch),把原本需要绑在input框的事件在监听变化时调用。

标签:console,log,inputVal,输入框,事件,整理,input,data
来源: https://blog.51cto.com/15142266/2690377

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有