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]; } },