HTML输入框中限制只输入金额(非负小数)

目前实现了:

1. 只能输入1个小数点

2. 只能输入数字

3. 可以输入以下特殊字符:回退;删除;home;end;箭头

4. 限制用户不能拷贝粘贴;

代码中使用char code进行验证,同时如果按的是数字键,则不能同时按Shift键。

 

下面是JavaScript方法:

 

function limit_money_input() {
    $("input.money").bind("contextmenu", function(){
        return false;
    });

    $("input.money").css('ime-mode', 'disabled');
    
    $("input.money").bind("keydown", function(e) {
        var key = window.event ? e.keyCode : e.which;
        if (isFullStop(key)) {
            return $(this).val().indexOf('.') < 0;
        }
        return (isSpecialKey(key)) || ((isNumber(key) && !e.shiftKey));
    });
}

function isNumber(key) {
    return key >= 48 && key <= 57
}

function isSpecialKey(key) {
    //8:backspace; 46:delete; 37-40:arrows; 36:home; 35:end; 9:tab; 13:enter
    return key == 8 || key == 46 || (key >= 37 && key <= 40) || key == 35 || key == 36 || key == 9 || key == 13
}

function isFullStop(key) {
    return key == 190 || key == 110;
}

 

使用使只需要在页面加载时调用即可,比如用jquery:

$(limit_money_input);
 

 

参考文件:

1. http://unixpapa.com/js/key.html

 

### 设置 Element UI 输入框仅允许输入两位小数 为了实现只允许用户在 `Element UI` 的输入框输入最多两位小数的功能,可以利用表单验证规则来完成这一需求。具体来说,在定义输入组件时通过配置 `rules` 属性指定自定义校验逻辑。 下面是一个完整的 Vue 组件例子展示如何设置带有此功能的输入框: ```vue <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <el-form-item label="金额" prop="amount"> <!-- 使用 el-input 控件 --> <el-input v-model.number="ruleForm.amount"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { var validateAmount = (rule, value, callback) => { if (!value) { return callback(new Error('请输入数值')); } const reg = /^\d+(\.\d{1,2})?$/; if (!reg.test(value)) { callback(new Error('只能输入数字,并且保留至多两位小数')); } else { callback(); } }; return { ruleForm: { amount: '' }, rules: { amount: [ { validator: validateAmount, trigger: 'blur' } ] } }; } }; </script> ``` 上述代码片段展示了如何创建一个简单的表单项并为其添加验证器[^1]。这里的关键在于正则表达式的应用以及将其集成到 `validateAmount` 函数中的方式。每当失去焦点(`trigger: 'blur'`) 或者提交表单的时候都会触发这个验证函数去检查用户的输入是否符合预期格式。 对于浮点数的小数位控制,虽然提到的是需要刷新页面才能生效的情况[^2],但在本案例中并不适用,因为这里的解决方案是在前端即时处理而不是依赖服务器端响应或页面重载来进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值