【input】输入框事件总结(input输入框非空验证)

发布时间：2024-01-17

【input】输入框事件总结 input标签事件总结

推荐整理分享【input】输入框事件总结(input输入框非空验证)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:input输入框非空验证,input 输入框,input输入框组件主要用于输入数据,其属性值,input输入框的属性,input输入框的属性,input输入框组件主要用于输入数据,其属性值,input输入框的属性,input输入框怎么设置必填,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在维护MES相关的系统,好家伙,接手就来个BUG,前端的关于input输入框的输入内容的输入内容事件失效的问题,

正好进行学习并汇总

一、在Html中input输入框相关事件写法：【input】输入框事件总结(input输入框非空验证)

常用的事件总结

事件功能onfocus（常用）input标签获取焦点事件onblur（常用）input失去焦点事件（触发条件：先获取焦点，再失去焦点触发）onchangeinput失去焦点并且它的value值发生变化时触发oninputinput框输入过程中value值改变时实时触发，换句话说就是每输入一个字符都会触发onclickinput标签type="button"时的点击事件onkeydowninput框输入时键盘按钮按下事件onkeyupinput框输入时键盘按钮抬起事件，触发onkeyup事件之前一定触发onkeydown事件onselectinput标签内容选中时触发事件

JavaScript语法：

JS绑定事件写法：

document.getElementByTagName(‘input’).onfocus = function();$("#XXX").onchange(){ }二、vue中监听input标签事件

vue中监听iinput标签事件的写法与H5+js的写法有些不同。

input实时监听事件

实时监听事件为v-on:input方法

//比如回车<input @keyup.enter="xxx()">---一般的<input type="text" v-model.trim="inputVal" @input="resetinputVal" />let regRule = /[\u4e00-\u9fa5]|[<>&'"\\]/g;data: {inputVal: '',},methods: {// 重置号码resetinputVal(e) {let val = e.target.valuelet value = val.replace(regRule, '')this.inputVal = valuethis.$forceUpdate()},}

//实时监听input值的变化，停⽌输⼊300ms后去请求，⽽不是时时请求数据(可以不看,自己学习博客记录)

data: {timeout: null,},watch: { inputVal(curVal, oldVal) { // 实现input连续输⼊，只发⼀次请求 clearTimeout(this.timeout); this.timeout = setTimeout(() => { this.getAPI(curVal); }, 300); }},methods: {// 请求接口getAPI(curVal) {},}//input获取焦点事件：<input type=“text” placeholder=“请输入” @blur=“xxx()”>//input失去焦点事件：<input type=“text” placeholder=“请输入” @focus=“xxx()”>

//限制小数位

<input type="number" @keydown="keydownFn" v-model="inputVal">//Vue 限制input输入小数点后两位number keydownFn(event) { // 通过正则过滤小数点后两位 // event.target.value = (event.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null //只能为正数 event.target.value = (event.target.value.match(/\-?\d+\.?\d{0,1}/g)[0]) || null //可以为负数},/Vue 限制input输入小数点后一位number keydownFn(event){ const arr = event.target.value.split('.'); if(arr.length == 2 && arr[1].length > 1){ //有至少两位小数 event.target.value = arr[0] + '.' + arr[1].substr(0,1); this.$message({ message: '只允许一位小数', type: 'warning' }); }else if(arr.length == 1){ //没有小数 event.target.value = arr[0] }else if(arr.length == 2 && arr[1].length == 1){ //只有一位小数 event.target.value = arr[0] + '.' + arr[1]; }},

本文链接地址:https://www.jiuchutong.com/zhishi/298689.html 转载请保留说明！

上一篇：10分钟Window本地部署stable diffusion AI绘图【入门教程】(win10本地模式)

下一篇：iconfont的N种使用方法(iconfont原理)