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

小灰灰 2023-09-28 14:13 34阅读 0赞

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

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

***解决前（效果图）：***  
![请添加图片描述][35d505598a424a928834711110638379.gif]  
***解决后（效果图）：***

![请添加图片描述][12fab4758419457280165141039af0d3.gif]

**解决方法：**

![在这里插入图片描述][be9ff7d08e374fdbb6cc13e15ed39473.png]  
**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][https_blog.csdn.net_weixin_49035434_article_details_125390323]

[35d505598a424a928834711110638379.gif]: https://img-blog.csdnimg.cn/35d505598a424a928834711110638379.gif
[12fab4758419457280165141039af0d3.gif]: https://img-blog.csdnimg.cn/12fab4758419457280165141039af0d3.gif
[be9ff7d08e374fdbb6cc13e15ed39473.png]: https://img-blog.csdnimg.cn/be9ff7d08e374fdbb6cc13e15ed39473.png
[https_blog.csdn.net_weixin_49035434_article_details_125390323]: https://blog.csdn.net/weixin_49035434/article/details/125390323