el-input使用所遇到的问题

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

1、当type=number或者v-model.number

maxlength失效，因为该属性是针对text、textarea、password类型的文本有效。

type=number时候，绑定输入的内容是Number类型的，不能获取到length。

2、全局匹配电话号码、验证码（仅数字）和价格（仅数字和小数点）

需要注意的问题：type必须设置为text

// main.js
// 只能输入数字 匹配电话号码
Vue.directive('enterNumber', {
  inserted: function(el) {
    el.addEventListener('keypress', function(e) {
      console.log(e)
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d/
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  }
})

// 匹配数字和小数点
Vue.directive('enterPrice', {
  inserted: function(el) {
    el.addEventListener('keypress', function(e) {
      e = e || window.event
      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
      const re = /\d|[.]/
      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
        if (e.preventDefault) {
          e.preventDefault()
        } else {
          e.returnValue = false
        }
      }
    })
  }
})

// index.vue
// 手机号码
<el-input
 v-enter-number
 v-model.trim="phoneNum"
 maxlength="11"
 type="text"
 placeholder="手机号码"/>
// 价格
<el-input
 v-enter-price
 v-model.trim="price"
 type="text"
 placeholder="价格"/>

当我把element-ui的版本从2.7.0升级2.13.0的时候，全局设置了并不能限制输入中文和符号，还存在兼容问题

解决方法：需要在@input时候限制输入中文和符号

<el-input
 v-enter-number
 v-model.trim="phoneNum"
 maxlength="11"
 type="text"
 name="phoneNum"
 auto-complete="off"
 placeholder="手机号码"
 clearable
 @input="phoneNum = phoneNum.replace(/[^\d]/g, '')"
 @keyup="onkeypass($event)" />


    /**
     * 限制不能输入中文，兼容火狐和ie
     */
    onkeypass(evt) {
      console.log(evt)
      // 火狐使用evt.which获取键盘按键值，IE使用window.event.keyCode获取键盘按键值
      const e = evt.which ? evt.which : window.event.keyCode
      if (e >= 48 && e <= 57) {
        return true
      } else {
        return false
      }
    }

3、当input的type属性为password或text时，如何移除浏览器的默认图标（兼容火狐，ie，safari，谷歌）

去除input type=password出现的眼睛图标，解决方法：

::-ms-reveal{display:none;}

去除input type=text出现的小叉叉，解决方法：

::-ms-clear{display:none;}

（4）当input type="number"时候移除样式

解决方法：

// 禁止input type='number' 的增减按钮 （火狐， Safari， Chrome， ie）
input[type=number] {
  -moz-appearance:textfield !important; /* 火狐 */
  appearance:textfield !important;
  -webkit-appearance:textfield !important; /* Safari 和 Chrome */
}
// 谷歌
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

未完待续。。

来源：oschina

链接：https://my.oschina.net/u/4042172/blog/3154065

标签

软件

keycode