美文网首页
标签限制输入

标签限制输入

作者: AR7_ | 来源:发表于2019-06-26 09:00 被阅读0次

方案一:
因为方案二会有一个问题,就是不能保留两位小数点,也就是金额的角和分,而且如果输入法是中文输入,然后按下切换中英文键shift,会发现可以输入英文字母,显然是有问题的,以下方案可以解决这两个问题。

   <el-input size="medium"
                      class="el-input-style"
                      v-model.trim="inputMony"
                      placeholder="请输入充值金额"
                      :maxlength="inputMaxL"
                      @input="inputMaxL = /^\d+\.?\d{0,1}$/.test(inputMony)? null: inputMony.length - 1"
                      :onkeyup="(inputMony = inputMony.replace(/[^0-9.]/gi, ''))">

方案二:
当实现充值功能时,使用<el-input>进行金额输入,所以需要将type设置为number类型,但是会发现,字母e和小数点.还是可以输入,为了达到限制输入,需要做以下处理。

 <el-input size="medium"  type="number" placeholder="其他充值金额" v-model="inputMony" @focus="inputFocus" @keydown.native="channelInputLimit">
    // bug fix:指定输入类型为number时仍然可以输入字母'e'和小数点'.'(因为也属于数字类型的范围),这里做一下输入限制
    channelInputLimit (e) {
      let key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    }

相关文章

网友评论

      本文标题:标签限制输入

      本文链接:https://www.haomeiwen.com/subject/splqcctx.html