input输入框事件
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];
}
},
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbkib
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01