Vue 学习随笔系列十一 -- input输入框和select下拉框使用

input输入框和select下拉框

文章目录

• input输入框和select下拉框
• 一、input输入框
• 二、select下拉框

---

一、input输入框

1、只能输入整数

<el-input onkeypress="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2、可以输入带小数点的数字

<el-input onkeypress="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"> 
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3、可以输入数字和字母包括特殊字符

<el-input
   oninput="if(value.length>50)value=value.slice(0,50)"
   οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
 >
</el-input>

4、只能输入字母和汉字

<el-input
   onkeyup="value=value.replace(/[\d]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))"
 >
</el-input>

5、只能输入数字和英文

<el-input
   onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
 >
</el-input>

6、不能输入以0开始的数字

<el-input
    onkeyup="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'')"
 >
</el-input>

二、select下拉框

1、select下拉框内容可以选中，但不展示解决办法

<el-select
  v-model="form.xxx"
  class="width-full"
  @change="handleChange"
>
  <el-option
    v-for="item in List"
    :key="item.code"
    :label="item.name"
    :value="item.code"
  ></el-option>
</el-select>

handleChange(val){
  // console.log(111, val)
  if (val) {
    this.$set(this.dataForm, this.dataForm.xxx, val)
  } else {
    this.$set(this.dataForm, this.dataForm.xxx, '')
  }
}