解决element-ui表单中限制输入纯数字的问题

最新推荐文章于 2025-09-24 12:42:38 发布

原创最新推荐文章于 2025-09-24 12:42:38 发布 · 1.5w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #浏览器适配

Vue 专栏收录该内容

18 篇文章

订阅专栏

博客作者分享了解决数字输入框在谷歌、火狐和QQ浏览器间兼容性问题的方法。原先使用elementUI的number类型输入框无法统一限制数字长度，于是改用传统input标签，并通过oninput事件配合正则表达式限制输入，确保只允许数字并限制长度。此改动不仅解决了兼容性问题，还保持了界面样式的一致性。

【问题】

输入框里面只能输入数字并且限制输入数字的长度，一开始使用的elementUI的组件，但是这个组件的数字限制不能同时适配于谷歌、火狐和QQ浏览器。
在这里插入图片描述

 	<p>
          最高正确率：
          <el-input
           type="number"
            class="el-dialog-input"
            placeholder="请输入最高正确率"
            maxlength="11"
               v-model="addHighAccuracy"
          ></el-input>
        </p>

【更改】

我直接用传统的input输入框代替了elementUI中的el-input输入框，然后再修改样式，做成和element差不多的样式就完美的解决了所有的问题。

 <p>
          最高正确率：
          <input
            oninput="value=value.replace(/[^\d]/g,'')" 
            class="el-dialog-input"
            placeholder="请输入最高正确率"
            maxlength="10"
                v-model="editHighAccuracy"
          >
 </p>
        <div style="margin: 15px 0"></div>

.el-dialog-input {
  width: 50%;
  height:30px;
  border-radius: 5px;//设置圆角框
  color: #606266;
  border:0.1px solid #dcdfe6;//设置圆角框的边框颜色
  outline:none;
  padding: 0 15px;
}
.word {
  margin-left: 30px;
}