input输入框事件流程变化

input输入框事件流程变化,第1张

从聚焦到失去焦点,以下事件会根据情况,先后判断是否会执行。

onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 -> onchange -> onblur

onfocus 聚焦事件

无论是用户主动的聚焦行为还是代码的强制聚焦,只要是由失去焦点的状态变为聚焦的状态都会触发这一事件。

<template>
  <div class="hello">
   <input type="text" @focus="onfocus" ref="input1">
   <button @click="focusbtn"> foucs </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onfocus () {
      console.log('聚焦执行')
    },
    focusbtn () {
      // 代码控制聚焦
      this.$refs.input1.focus()
    }
  }
}
</script>

如果本身就是聚焦状态,多次执行聚焦则不会执行

<template>
  <div class="hello">
   <input type="text" @focus="onfoucs" ref="input1">
   <button @click="foucsbtn"> foucs </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onfoucs () {
      console.log('聚焦执行')
    },
    foucsbtn () {
      // 代码控制聚焦,onfoucs只会执行一次
      this.$refs.input1.focus()
      this.$refs.input1.focus()
      this.$refs.input1.focus()
    }
  }
}
</script>
<template>
  <div class="hello">
   <input type="text" @focus="onfoucs" ref="input1">
   <button @click="foucsbtn"> foucs </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onfoucs () {
      console.log('聚焦执行')
    },
    foucsbtn () {
      // 代码控制聚焦
      this.$refs.input1.focus()
      this.$refs.input1.blur()
      // 失去焦点后再聚焦,onfoucs则会再执行一次
      this.$refs.input1.focus()
    }
  }
}
</script>

这也又一次应证了,只有从失去焦点状态变为聚焦,@focus才会执行。

onkeydown 键盘按键按下事件

每一个键的触发都有三个步骤 按下keydown,按住press,抬起keyup,如果有按键输入,keydown会率先触发

<template>
  <div class="hello">
   <input type="text" @keydown="keydown" @keypress="keypress" @keyup="keyup">
   <button @click="foucsbtn"> foucs </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    keydown () {
      console.log('按下')
    },
    keypress () {
      console.log('按住')
    },
    keyup () {
      console.log('抬起')
    }
  }
}
</script>

效果

但是,如果一直按住按键不松手,keydown也会一直执行

效果

onkeypress 键盘按键按住事件

每一个键的触发都有三个步骤 按下keydown,按住press,抬起keyup,如果有按键输入,keydown触发后,只要不松开按键,onkeypress 会和onkeydown一起一直触发

onkeyup 键盘按键松开事件

每一个键的触发都有三个步骤 按下keydown,按住press,抬起keyup,如果有按键输入,松开按键的一瞬间会触发一次onkeyup事件,一般来说,keydown和keyup选择一个使用就可以了

oninput 输入值变化事件

当input输入框的值发生变化时,就会触发,一般用户输入内容,会变化很多次,如果不做防抖处理,oninput的事件会执行很多次

<template>
  <div class="hello">
   <input type="text" @input="onInput" @keydown.enter="onEnter">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onEnter () {
      console.log('按下enter')
    },
    onInput () {
      console.log('改变了')
    }
  }
}
</script>


按下回车键这个行为不会触发oninput事件

onchange 失去焦点后的输入值变化事件

当用户输入完成后,无论是按了一下回车键,还是点击了其它地方,或者代码控制失去焦点,都有可能触发onchange 事件。是否触发的另外一个条件就是,与上一次失去焦点的值相比,此时input框内的值是否发生变化,如果变化了,则触发onchange,没有变化则不触发

<template>
  <div class="hello">
   <input type="text" @change="onchange">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onchange () {
      console.log('改变了')
    }
  }
}
</script>

这里涉及到开发中常用的另外一个问题,当用户敲击回车键后,onchange事件仍有可能触发。如果input框同时绑定了onchange事件,也绑定了对回车键的监听,如果在按下回车键前,input框的值发生变化,这两个事件一定都会触发。

<template>
  <div class="hello">
   <input type="text" @change="onchange" @keydown.enter="onEnter">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    onEnter () {
      console.log('按下enter')
    },
    onchange () {
      console.log('改变了')
    }
  }
}
</script>

按下enter键虽然没有失去焦点,但也有可能会触发onchange事件

如果开发希望将这两个事件同时绑定,又从功能上要求完全分开,就需要input输入框的值是否发生变化,如果没有发生变化,只会执行回车事件,如果发生了变化,则阻止回车事件,因为onChange会执行

<template>
  <div class="hello">
   <input type="text" @change="onchange" @keydown.enter="onEnter">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      initValue: ''
    }
  },
  methods: {
    onEnter (e) {
      const val = e.target.value
      if (val === this.initValue) {
        // 表示onChange不会执行,所以得执行
        console.log('按下enter')
      }
    },
    onchange (e) {
      this.initValue = e.target.value
      console.log('改变了')
    }
  }
}
</script>

输入后第一次按下回车,onenter虽然会触发,但我们的不想要执行的console.log并没有执行。

再次多次点击回车,不会再执行onchange,因为值没有变化

再次说明,失去焦点后,会先判断onchange是否执行,再执行onblur

<template>
  <div class="hello">
   <input type="text" @change="onchange" @keydown.enter="onEnter" @blur="onblur">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      initValue: ''
    }
  },
  methods: {
    onEnter (e) {
      const val = e.target.value
      if (val === this.initValue) {
        // 表示onChange不会执行,所以得执行
        console.log('按下enter')
      }
    },
    onchange (e) {
      this.initValue = e.target.value
      console.log('改变了')
    },
    onblur () {
      console.log('失去焦点了')
    }
  }
}
</script>

onblur 失去焦点事件

当用户输入完成后,无论点击了其它地方,或者代码控制失去焦点,只要有聚焦到失去焦点这一变化,就一定会触发onblur,如果原本就是失去焦点状态,再次失去焦点,onblur事件不会再触发。

<template>
  <div class="hello">
   <input type="text" @change="onchange" @blur="onblur" ref="input1">
   <button @click="clickBtn">失去焦点</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      initValue: ''
    }
  },
  methods: {
    clickBtn (e) {
      this.$refs.input1.blur()
      this.$refs.input1.blur()
      this.$refs.input1.blur()
    },
    onblur () {
      console.log('失去焦点了')
    }
  }
}
</script>

无论怎么点击按钮都不会触发

<template>
  <div class="hello">
   <input type="text" @change="onchange" @blur="onblur" ref="input1">
   <button @click="clickBtn">失去焦点</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      initValue: ''
    }
  },
  methods: {
    clickBtn (e) {
      this.$refs.input1.blur()
      this.$refs.input1.blur()
      // 如果聚焦后再失去焦点,则会触发一次onblur
      this.$refs.input1.focus()
      this.$refs.input1.blur()
    },
    onblur () {
      console.log('失去焦点了')
    }
  }
}
</script>

点击一次按钮

但是,按下回车,并不会失去焦点,onblur不会触发

<template>
  <div class="hello">
   <input type="text" @change="onchange" @keydown.enter="onEnter" @blur="onblur">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      initValue: ''
    }
  },
  methods: {
    onEnter (e) {
        console.log('按下enter')
    },
    onblur () {
      console.log('失去焦点了')
    }
  }
}
</script>

说明,vue的input输入框事件是从原生的input输入框封装而来的,所以对于原生html input输入框事件,与上述说明一致。

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1297664.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-10
下一篇2022-06-10

随机推荐

  • 奥尔胡斯大学一年学费怎么申请奖学金

      奥尔胡斯大学一年学费?怎么申请奖学金?请咨询立思辰留学360丹麦专家团队。奥胡斯大学(拉丁文:Universitas Arhusiensis;丹麦文:Aarhus Universitet)是一所国

    2022-07-01
    300
  • 罗伯特莫里斯大学考试难吗好毕业吗

      罗伯特莫里斯大学考试难吗?好毕业吗?请咨询立思辰留学360美国专家团队。所属国家: 美国所在省洲: 宾夕法尼亚州建校时间: 1921年学校类型: 大学学校类别: 私立综合排名: 1000中国教育部

    2022-07-01
    000
  • 纽约布拉特学院中国的高中生能直接报考吗

      纽约布拉特学院中国的高中生能直接报考吗?请咨询立思辰留学360美国专家团队。立思辰留学360介绍,普拉特学院(又译为普瑞特艺术学院)是一所专业、私立的艺术类学院,成立于1887年10月17日,目前

    2022-07-01
    300
  • 申请纽约布拉特学院研究生怎么样

      申请纽约布拉特学院研究生怎么样?请咨询立思辰留学360美国专家团队。院校简介立思辰留学360介绍:布拉特学院是位于纽约城中心地带的一所私人艺术院校。布拉特学院融合了创造性应用与理论,为毕业生成为在

    2022-07-01
    000
  • 皇太后大学的护士学院介绍

    泰国清莱皇太后大学据立思辰留学360介绍,皇太后大学于1998年9月25日正式成立 , 她是一所国立自治大学。她的建立是为了回应泰国北方人民为缅怀诗娜卡琳皇太后殿下宏恩厚泽的需要,使之成为人民纪念、效

    2022-07-01
    000
  • 泰国马汉科理工大学申请

    马汉科理工大学立思辰留学360介绍,马汉科理工大学(MahanakornUniversityofTechnology)是位于泰国曼谷的一所私立理工大学,成立于1990年。它是一所研究型大学,其课程基于

    2022-07-01
    000
  • 2017年素里公立教育局课外活动多吗

    留学课程立思辰留学360介绍:除了学习必修的专业课程,学生们还可选择参加各种各样的课外活动,包括音乐、戏剧、足球、篮球、棒球、排球、曲棍球、高尔夫球、游泳、网球、滑雪和田径。完成所有

    2022-07-01
    000
  • 光云大学费用

      据立思辰留学360介绍,光云大学(英语:Kwangwoon University),创立于1934年,为韩国著名的理工科大学,也是世界级理工大学。在电子技术和计算机领域驰名韩国,开创了韩国电子工学

  • 申请坦帕大学研究生怎么样

      申请坦帕大学研究生怎么样?请咨询立思辰留学360美国专家团队。坦帕大学立思辰留学360介绍,坦帕大学(the University of Tampa),佛罗里达州私立大学联盟之一 ,是一所中等规模

    2022-07-01
    300

发表评论

登录后才能评论

评论列表(0条)

    保存