el-input设置type为number时,切换为中文输入法输入会让光标上移的问题解决

1.el-input设置type为number时,切换为中文输入法输入会让光标上移的问题解决

element的input框有个bug,就是当他设置类型时number的时候,你用中文输入法输入,点空格确定,他的光标会移动到上面去

解决前(效果图):
请添加图片描述
解决后(效果图):

请添加图片描述

解决方法:

<style>
/**
 * 解决el-input设置类型为number时,中文输入法光标上移问题
 **/
.el-input__inner{
  line-height: 1px !important;
}

/**
 * 解决el-input设置类型为number时,去掉输入框后面上下箭头
 **/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>

在这里插入图片描述
2.el-element 中 input设置了type=“number“还能输入e和负数

解决方法:

οnkeypress=“return (/[\d]/.test(String.fromCharCode(event.keyCode)));”

<el-input v-model="queryForm.remainingCountBeg"
    placeholder="剩余次数(起)" clearable type="number" maxlength="9" 
    onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));">
</el-input>

3.禁止键盘上下键事件 ( 其实按键盘上下键还是可以让其变成负数 )

解决方法:

onMounted(() => {
      // el-input type=number时,如果点击键盘上下可以改变input中的值,这个方法是禁止改变
      document.onkeydown = function () {
        if (window.event.keyCode === 38 || window.event.keyCode === 40) {
          window.event.returnValue = false;
        }
      }
    })

参考:https://blog.csdn.net/weixin_49035434/article/details/125390323

  • 10
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值