输入框只能输入正确的金额

最新推荐文章于 2023-06-07 15:17:25 发布
原创 最新推荐文章于 2023-06-07 15:17:25 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input #金额

页面代码

<input type="text" id="ipt1" />

js代码           

$("#ipt1").keyup(function () {
    var reg = $(this).val().match(/\d+\.?\d{0,2}/),
        txt = '';
    if (reg != null) {
        txt = reg[0];
    }
    $(this).val(txt);
}).change(function () {
    $(this).keypress();
    var v = $(this).val();
    if (/\.$/.test(v)){
        $(this).val(v.substr(0, v.length - 1));
    }
});

 

js限制输入框只能输入数字(onkeyup触发)
10-17
### 知识点：使用JavaScript限制输入框只能输入数字 #### 概述 本文介绍了如何利用JavaScript实现仅允许用户在输入框中输入数字的功能。这一需求在各种基于Web的表单验证中非常常见，例如在填写电话号码、身份证...
js 输入框 输入金额 位数限制
03-22
js 输入框 输入金额 位数限制
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
12-13
第一： 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二： 限制是两位的小数 <input type = "text" name= "price" id = 'price' onkeyup= "if( ! /^d*(?:.d{0,2})?$/.test(this.value)){alert('只能输入数字，小数点后只能保留两位');this.v
vue.js实现只能输入数字的输入框
12-13
在软件开发网里，看了vue.js的教程，看完后，练练手，就试着实现了只能输入数字的输入框。在之前的博客里，用jquery也实现了这样的功能，这里用vue.js来实现，把实现的过程记录下来 如果只是一个输入框，要实现就非常的简单了，输入框的内容和数据绑定，给数据加一个监听器就可以了，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> [removed][removed] </hea
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
input输入框中禁止输入小数和负数（*只允许输入正整数 *） 最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两个办法，在这里跟大家分享一下。（因为是刚毕业，第一次写博客，所以有点生疏，请各位大佬担待一些） 方法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的 首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。 然后我们传个$event对象进去来获取原生的DOM（可以简单理
vue项目原生input框限制只能输入金额（必须大于0，最多小数点后两位，不能输入e、+、-）
01-09 6424
今天碰到一个需求，做的是微信支付，所以需要设置输入框里必须输入是能支付的数字，想投机网上直接找现成的方法，发现大部分都有bug或者不生效。于是自己费了点时间写了以下提供两种方案，希望有帮助。
vue input框，限制只能输入金额类型的数据 保留2位小数
lmy_loveF的博客
07-07 1987
在270032_Wages_Accounting_Management_System_Vue\src\components\common文件夹下面新建一个inputFloat.js文件，文件内容如下： import Vue from 'vue'; Vue.directive('inputFloat', { bind(el, binding, vnode) { let input = el.getElementsByTagName('input')[0]; input.addEve.
精选资源
js正则限制input只能输入金额
01-08
限制input只能输入金额 JS代码: function checkInput(_this) { if (_this.value != '' && _this.value.substr(0, 1) == '.') { _this.value = '0.00' } if (_this.value == '') { _this.value = '0.00' } _...
vue限制输入框只能输入8位整数和2位小数的代码
10-16
文章介绍的是一项在Vue框架中限制用户输入内容的实践，具体要求用户在输入框中只能输入最多8位的整数和最多2位的小数。这项功能在开发涉及金额、数值计算等场景时尤为常见，需要确保用户的输入是符合格式规定的数字...
vue项目原生input框限制只能输入金额
stpzhf的博客
05-10 1007
使用uni-app 调试薪资的输入框遇到既要大于0 还要能以0 开头的问题 记录一下解决方案`直接是参考别人帖子代码 这里只是做一下记录原文链接：https://blog.youkuaiyun.com/TKP666/article/details/128616042。
javascript 金额输入框
02-04
html javascript 金额输入框，输入小写金额自动显示大写金额，自动增加逗号分割，自动增加货币符号，并有校验。
写js 时输入框限制只能输入金额包含小数
qq_33543960的博客
05-27 662
<TextInput placeholder={"￥"} keyboardType={"decimal-pad"} selectionColor={'#4A90E2'} value={this.state.money} maxLength = {15} onChangeText={text => ...
html输入框2位小数,js控制input文本框只能输入金额数字（小数点后只能有2位）...
weixin_29603489的博客
06-04 588
首先，在input中增加onkeyup="clearNoNum(this)"然后，引入代码//对输入金额进行校验functionclearNoNum(obj){obj.value=obj.value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符obj.value=obj.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符...
Vue.js 限制只能输入金额的输入框
qq_38761701的博客
04-30 3971
Vue.js 限制只能输入金额的输入框 import Vue from ‘vue’ // 自定义名字enterMoney Vue.directive(‘enterMoney’, { inserted: function(el) { el.addEventListener(‘keypress’, function(e) { e = e || window.event const charcode ...
自定义指令：限制输入框只能输入金额
qq_1016371234的博客
05-25 1814
1、在src/directive/文件夹下新建一个inputFloat.js import Vue from 'vue' Vue.directive('inputFloat', { bind(el, binding, vnode) { const input = el.getElementsByTagName('input')[0] input.addEventListener('compositionstart', () => { vnode.inputLoc.
正则限制 input 输入框只能输入整数、小数(金额或者现金)
Allen_kai_hui的博客
06-07 6257
上述代码中，我们使用 `oninput` 事件监听 input 的输入，并在事件处理函数中进行限制。正则表达式 `/[^0-9.]/g` 只允许输入数字和小数点，其余字符会被过滤掉。然后，使用 `replace()` 方法将输入值格式化为合法的整数或小数。如果输入值包含小数点，则保留前两位小数，其他部分被过滤掉；这样，用户在输入框中输入值时，只有符合要求的数字和小数点能够被输入，不符合要求的字符会被过滤掉。同时，在格式化输入值时，我们也进行了检查，确保其为合法的整数或小数。
Vue限制只能输入金额,小数位自定义长度
qq_25287347的博客
08-09 937
使用vue指令来做金额限制。指令跟组件一样需要注册才能使用，同样有两种方式，一种是局部注册：另一种是全局注册，这里使用全局注册。
el-input 只能输入金额
刘承峰的博客
01-17 1622
<el-input v-model="kanFrom.price" :placeholder="请输入报价" @input="(v) => (kanFrom.price = v.replace(/[^\d.]/g,'').replace(/\.{2,}/g, '.').replace(/^(\d+)\.(\d\d).*$/, '$1.$2'))"/>
前端js实现金额输入框只能输入数字和点
最新发布
09-29
前端使用 JavaScript 实现只能输入数字和点的金额输入框，有多种实现方式，以下为几种常见方法： ### 实时过滤小数点及限制小数位数 当输入超过 1 个小数点时，只保留第一个小数点，还可进一步限制小数位数。此方法处理了输入时的实时过滤，但提交前仍建议做最终验证，对于金额类输入，建议配合 Big.js 等库处理精度问题，移动端使用时，可设置 `inputmode="decimal"` 优化键盘体验。 ```javascript // 示例代码，假设 input 为输入框元素 const input = document.getElementById('yourInputId'); input.addEventListener('input', function() { let newVal = this.value; // 如果超过1个，只保留第一个小数点 if ((newVal.match(/\./g) || []).length > 1) { newVal = newVal.replace(/\.(?=.*\.)/g, ''); } // 限制小数位数为2位 const decimalCount = (newVal.match(/\./g) || []).length; if (decimalCount === 1) { const parts = newVal.split('.'); if (parts[1].length > 2) { newVal = parts[0] + '.' + parts[1].substring(0, 2); } } this.value = newVal; }); ``` ### jQuery 实现输入框限制 使用 jQuery 实现限制数字输入框，可对输入进行实时过滤，支持是否允许输入小数点的设置。 ```javascript // 假设 _this 为 jQuery 选择器选中的输入框元素 function numberInp(_this, flag = false) { if (!isPC()) { _this.bind("input propertychange", function (event) { var inputValue = $(this).val(); if (flag) { $(this).val(inputValue.match(/^\d*(\d{0,2})/g) ? inputValue.match(/^\d*(\d{0,2})/g)[0] : null); } else { $(this).val(inputValue.match(/^\d+(\.?\d{0,2})/g) ? inputValue.match(/^\d+(\.?\d{0,2})/g)[0] : null); } }); } else { _this.on('input', function(event) { var inputValue = $(this).val(); if (flag) { $(this).val(inputValue.match(/^\d*(\d{0,2})/g) ? inputValue.match(/^\d*(\d{0,2})/g)[0] : null); } else { $(this).val(inputValue.match(/^\d+(\.?\d{0,2})/g) ? inputValue.match(/^\d+(\.?\d{0,2})/g)[0] : null); } }); } } // 使用示例 numberInp($('#yourInputId')); ``` ### Vue 项目中实现 在 Vue 项目（如 uniapp）中，可以通过 `@input` 事件结合正则表达式来实现只能输入小数点后两位数字的金额输入框。 ```vue <template> <u-field v-model="cash" @input="inputChange" type="number" label="提现金额" placeholder="最多可提现一亿元"> </template> <script> export default { data() { return { cash: '' }; }, methods: { inputChange(value) { if(value) { var price = value.toString().match(/\d+\.\d{2}/); this.$nextTick(() => { this.cash = price && price[0]; }); } } } }; </script> ``` ### Vant 金额输入框 在 Vant 组件库中，可以通过自定义组件的方式实现金额输入框。在 `components` 中新建文件夹 `currency`，新建 `index.js` 文件。 ```javascript // index.js import Currency from './src/currency.vue'; Currency.install = function (Vue) { Vue.component(Currency.name, Currency); }; export default Currency; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值