input标签事件总结

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

正好进行学习并汇总

一、在Html中input输入框相关事件写法：

常用的事件总结

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

JavaScript语法：

JS绑定事件写法：

document.getElementByTagName(‘input’).onfocus = function();
$("#XXX").onchange(){  }

二、vue中监听input标签事件

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

input实时监听事件

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

//比如回车
<input @keyup.enter="xxx()">
---一般的
<!--HTML页面方法-->
<input type="text" v-model.trim="inputVal" @input="resetinputVal" />

<!--js方法 -->
let regRule = /[\u4e00-\u9fa5]|[<>&'"\\]/g;
data: {
	inputVal: '',
},
methods: {
	// 重置号码
	resetinputVal(e) {
		let val = e.target.value
		let value = val.replace(regRule, '')
		this.inputVal = value
		this.$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];
     }
},