最近吧做一些表單提交的項(xiàng)目，這就避免不了 和 input打交道 樣式啊 方法啊等等
我總結(jié)一下 基本都是些常用的 做一些校驗(yàn)
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, '')"
// 只能輸入數(shù)字
oninput="value = value.replace(/[^0-9]/g, '')"
// 只允許輸入數(shù)字和小數(shù)點(diǎn)
oninput="value = value.replace(/[^\d.]/g,'')"
// 最大輸入長度
maxlength="10"
// 最小輸入長度
minlength="1"
// 保留兩位小數(shù)
twoNum() {
this.text = Number(this.text).toFixed(2);
},
// 禁止輸入空格
keydown(e) {
if (e.keyCode == 32) {
e.returnValue = false;
}
},
// 本人常用一些事件
// onfocus 當(dāng)input 獲取到焦點(diǎn)時(shí)觸發(fā)
// onblur 當(dāng)input失去焦點(diǎn)時(shí)觸發(fā) 注意這里 是獲取焦點(diǎn)之后在失去焦點(diǎn)觸發(fā)的 判斷一些 是否為空 等
// oninput 當(dāng)value值發(fā)生改變觸發(fā)該事件
// 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; // 修改光標(biāo)顏色
}
// 修改 placeholder 顏色字體大小
input::-webkit-input-placeholder{
color:red;
font-size:20px;
}
</style>
