限制input的输入内容

smile_life_

已于 2023-07-13 14:16:50 修改

阅读量799

点赞数

文章标签： java html 前端

于 2023-05-01 16:18:30 首次发布

本文链接：https://blog.youkuaiyun.com/smile_life_/article/details/130456792

版权

文章介绍了如何使用HTML的input元素结合JavaScript来限制用户只能输入数字和小数。第一个例子允许输入任意小数，而第二个例子则进一步限制了只能输入金额格式的数字，最多两位小数，并且0开头时必须跟一个小数点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、限制input只能输入数字包括小数

<input type="text" name="name" lay-verify="title" autocomplete="off" class="layui-input" oninput = "value=value.replace(/[^\d.]/g,'').replace(/^\./g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.')">

2、只能输入金额，且最多两位小数，且如果0开头，后面要跟小数点。整数部分长度不限制

<input id="pay-input" style="flex: 1; text-align: center; border: 1px solid #e1dcdc; height: 35px;"
       oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/^0(\d)/, '$1').replace(/^(\d*)(\.)(.*)/, function(_, leadingZeros, dot, rest) {
          return leadingZeros === '' ? '0.' + rest : leadingZeros + dot + rest;
       }).replace(/^(\d*\.?\d{0,2}).*$/, '$1')">