input输入框中只能输入纯数字

最新推荐文章于 2024-06-07 17:42:25 发布

MaNong_girl

最新推荐文章于 2024-06-07 17:42:25 发布

阅读量1.3k

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/MaNong_girl/article/details/120523127

版权

项目中因为利用 element-ui 和avue两个ui框架搭建的

1、利用element-ui自带的校验需要注意点 prop :rules ref这三个属性

2、利用oninput时间进行校验 oninput = "value=value.replace(/[^\d]/g,'')" 写在html中Input 标签内可以，写在第三方ui框架也可以

<el-col class="elCol">

<el-form-item label="支付金额">

<el-input placeholder="支付金额" size="small" v-model="formInline.payAmount"

οninput="value=value.replace(/[^\d]/g,'')"/>

<el-form-item>

</el-col>

3.这是html中input标签中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>input</title>
  </head>
  <body>
     <div>
        <span>位置：</span>
         <input style="float: left;height: 36px;font-size: 18px;width: 176px;"
            id="content-upd-value-sort" οninput="value=value.replace(/[^\d]/g,'')">
     </div>

</body>

4.限制input输入框只能输入纯数字

A.οnkeyup="value=value.replace(/[^\d]/g,'')"

使用onkeyup事件，有bug，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母

B.οnchange="value=value.replace(/[^\d]/g,'')"

使用onchange事件，在输入内容后，只有input丧失焦点时才会得到结果，并不能在输入时就做出响应

C.οninput="value=value.replace(/[^\d]/g,'')"

使用oninput事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题

5.input输入框只能输入大于0的数字

οninput="value=value.replace(/\D|^0/g,'')"

MaNong_girl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input输入框中只能输入纯数字

项目中因为利用 element-ui 和avue两个ui框架搭建的1、利用element-ui自带的校验需要注意点 prop :rules ref这三个属性2、利用oninput时间进行校验oninput = "value=value.replace(/[^\d]/g,'')" 写在html中Input 标签内可以，写在第三方ui框架也可以<el-col class="elCol"> <el-form-item label="支付金额"> ...
复制链接

扫一扫

input输入框中只能输入纯数字

“相关推荐”对你有帮助么？