最近吧做一些表单提交的项目，这就避免不了 和 input打交道 样式啊 方法啊等等
我总结一下 基本都是些常用的 做一些校验
template
<template>
<input v-model="text" @keydown="keydown($event)" />
</template>
// 只能输入中文
onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g,'')"
// 只能输入英文
οnkeyup="value = value.replace(/[^a-zA-Z]/g, '')"
// 只能输入数字
oninput="value = value.replace(/[^0-9]/g, '')"
// 只允许输入数字和小数点
oninput="value = value.replace(/[^\d.]/g,'')"
// 最大输入长度
maxlength="10"
// 最小输入长度
minlength="1"
// 保留两位小数
twoNum() {
this.text = Number(this.text).toFixed(2);
},
// 禁止输入空格
keydown(e) {
if (e.keyCode == 32) {
e.returnValue = false;
}
},
// 本人常用一些事件
// onfocus 当input 获取到焦点时触发
// onblur 当input失去焦点时触发 注意这里 是获取焦点之后在失去焦点触发的 判断一些 是否为空 等
// oninput 当value值发生改变触发该事件
// disalbe 禁止输入 颜色会变浅
// readonly="readonly" 禁止输入 只读属性颜色不会变浅
script
<script>
data() {
return {
text: '', // 双向绑定
}
},
methods:{
// 禁止输入空格
keydown(e) {
if (e.keyCode == 32) {
e.returnValue = false;
}
},
}
</script>
style
<style>
input {
caret-color:red; // 修改光标颜色
}
// 修改 placeholder 颜色字体大小
input::-webkit-input-placeholder{
color:red;
font-size:20px;
}
</style>
