el-input输入字母转化大写字母

<template slot-scope="{disabled,size}" slot="shortcodeSearch">
   <el-input placeholder="助记符" :disabled="disabled" :clearable="true" :size="size" style="width:150px;" v-model.trim="shortCodeUpperCase"></el-input>
</template>



data(){
  return{
      inputVal:'',
  }
}
// 计算属性
computed: {
   shortCodeUpperCase: {
      get() {
        return this.inputVal;
      },
      set(val) {
        this.inputVal = val.toUpperCase();
        // 该input真正对应的字段:shortcode
        this.form.shortcode = this.inputVal
      },
    },
},
// 监视属性
watch: {
  'shortCodeUpperCase'() {
    // 搜索操作
    this.customSearch()
  }
},
methods: {
   onLoad(page, params = {}) {
     this.loading = true;
     getGoodsPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
       if (res.data.success) {
         const data = res.data.data;
         this.page.total = data.total;
         this.data = data.records;
         this.loading = false;
         this.selectionClear();
       }
     })
   },
 
   // 自定义搜索
   customSearch() {
     this.onLoad(this.page, this.form)
   },
   // 清空自定义搜索框
   customEmptySearch() {
     this.form.shortcode = ''
     this.shortCodeUpperCase = ''
   }
}

参考博客:https://www.jianshu.com/p/19c9b443c6ce

### 实现 Element UI `el-input` 组件仅允许输入大写字母 为了使 `el-input` 输入框只接受大写英文字母,可以利用 JavaScript 的事件处理机制来实现这一功能。具体来说,在用户每次按键后立即转换成大写字母或阻止不符合条件的字符输入。 #### 方法一:使用 `oninput` 事件自动转为大写 这种方法会在用户键入任何内容时立即将其转换为大写字母: ```html <el-form-item label="请输入大写字母"> <el-input v-model="uppercaseValue" @input="toUppercase" placeholder="请输入大写字母"></el-input> </el-form-item> <script> export default { data() { return { uppercaseValue: '' }; }, methods: { toUppercase(event) { this.uppercaseValue = event.target.value.toUpperCase(); } } }; </script> ``` 此方法简单易懂,适用于大多数场景[^1]。 #### 方法二:通过正则表达式过滤非大写字母并即时替换 这种方式更加严格地控制了用户的输入行为,不允许用户输入大写字母之外的内容: ```html <el-form-item label="请输入大写字母"> <el-input v-model="onlyUpperValue" onkeyup="this.value=this.value.replace(/[^A-Z]/g,'')" placeholder="请输入大写字母"></el-input> </el-form-item> ``` 上述代码片段中的 `onkeyup` 属性绑定了一个内联函数,该函数会移除非 A 到 Z 范围内的所有字符[^2]。 这两种方式都可以有效地限制 `el-input` 中只能输入大写字母,开发者可以根据实际需求选择合适的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值