js限制input只能输入有效的数字,有且只有一个小数点,第一个不能为小数点-备...

本文介绍了一个使用jQuery实现的JavaScript脚本,该脚本能够限制HTML输入框内的数字输入,包括禁止输入非法字符、控制小数点数量及位置,并在失去焦点时移除末尾多余的小数点。

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

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <script src="js/jq.js"></script>  
  7.   
  8. </head>  
  9. <body>  
  10.       
  11.   <input type="text" id="Score" />  
  12.     <script type="text/javascript">  
  13.     $(document).ready(function() {  
  14.     //敲击按键时触发  
  15.     $("#Score").bind("keypress", function(event) {  
  16.     var event= event || window.event;  
  17.     var getValue = $(this).val();  
  18.     //控制第一个不能输入小数点"."  
  19.     if (getValue.length == 0 && event.which == 46) {  
  20.         alert(1)  
  21.         event.preventDefault();  
  22.         return;  
  23.     }  
  24.     //控制只能输入一个小数点"."  
  25.     if (getValue.indexOf('.') != -1 && event.which == 46) {  
  26.         event.preventDefault();  
  27.         alert(1)  
  28.         return;  
  29.     }  
  30.     //控制只能输入的值  
  31.     if (event.which && (event.which 48 || event.which > 57) && event.which != 8 && event.which != 46) {  
  32.         event.preventDefault();  
  33.          return;  
  34.         }  
  35.     })  
  36.     //失去焦点是触发  
  37.     $("#Score").bind("blur", function(event) {  
  38.     var value = $(this).val(), reg = /\.$/;  
  39.     if (reg.test(value)) {  
  40.     value = value.replace(reg, "");  
  41.     $(this).val(value);  
  42.     }  
  43.     })  
  44.     });  
  45. </script>  
  46.   
  47. </body>  
  48. </html>  

 

 

 

js处理数字相关文章:

onkeyup限制输入框只能输入数字

移动端手机网站限制input只能输入数字

toFixed方法重写,toFixed四舍五入在数值很小时的精度问题

 

js处理数字保留2位小数,强制保留2位小数不够补上.00

数字格式化,格式数字保留2位小数点,格式数字自定义保留n位小数点

js数字金额大写转换

 

数字格式化相关文章:

数字格式化,格式数字保留2位小数点,格式数字自定义保留n位小数点

数字格式化为金额格式 (3位一个逗号隔开)如:100,000.00 

js 填写银行卡号时,每4个数字用空格隔开

 
js限制数字相关文章:
UniApp 的 `input` 组件可以设置成一个多类型输入框,允许用户同时输入数字小数。为了满足您的需求: 1. **启用数字小数输入**:首先,在 `<input>` 标签中添加 `"type": "number"` 类型,并开启步长(step)属性,如果需要限制最小或最大值,也可以设置 `min` 和 `max` 属性。 ```html <input type="number" step="any" min="0" max="100" placeholder="请输入数字小数"> ``` 2. **限制第一不能小数点**:JavaScript 事件监听器可以用于验证用户输入。例如,在 `input` 或 `change` 事件触发时检查输入的内容,若第一小数点则清除或提示用户。 ```javascript uni.input.addEventListener('input', function (event) { let value = event.detail.value; if (value[0] === '.') { event.detail.value = value.slice(1); // 如果是小数点开头,则去掉第一个字符 alert('第一不能小数点'); } }); ``` 3. **避免输入不规范的数字**:对于包含前导零或像 "01" 这样的非标准数字格式,可以在输入过程中进行正则表达式匹配检查。例如,只接受两及以上的整数或纯小数: ```javascript function isValidNumber(value) { const pattern = /^\d+(\.\d+)?$; // 只接受数字小数 return pattern.test(value); } if (!isValidNumber(event.detail.value)) { event.detail.value = ''; // 清除无效输入 alert('不规范的数字格式,请重新输入'); } ``` 以上代码演示了如何在 UniApp 中创建一个基本的满足条件的数字小数输入框,但实际应用中可能还需要结合样式和更全面的验证逻辑进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值