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

举报
Laura_张 发表于 2022/08/26 23:58:42 2022/08/26
【摘要】 【问题】 输入框里面只能输入数字并且限制输入数字的长度,一开始使用的elementUI的组件,但是这个组件的数字限制不能同时适配于谷歌、火狐和QQ浏览器。 <p> ...

【问题】

输入框里面只能输入数字并且限制输入数字的长度,一开始使用的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;
}

在这里插入图片描述

文章来源: blog.csdn.net,作者:张艳伟_Laura,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/Laura__zhang/article/details/121260553

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。