前端的小玩意(1)input 只允许输入整数 + 用逗号进行三位分割

简介: (34)将输入框数字,每3位用逗号分隔 输入框的值为this.value JS代码: function toHaveComma(obj) { console.log(obj.value); var val = obj.value.toString(); var length = val.length; for (var i = 1; i <

(34)将输入框数字,每3位用逗号分隔

输入框的值为this.value

JS代码:

function toHaveComma(obj) {
    console.log(obj.value);
    var val = obj.value.toString();
    var length = val.length;
    for (var i = 1; i < length / 3; i++) {
        var temp = val.slice(0, -4 * i + 1);    //从后往前数,来获取前面的字符串
        val = val.replace(temp, temp + ',');    //给前面的字符串后面加一个逗号
    }
    obj.value = val;
}



HTML代码:

<span style="font-size:18px;"><input type="text" 
       onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
       onfocus="this.value=this.value.replace(/,/gi,'')" /></span>



解释:

onKeypress只允许输入数字,如果允许输入句号的话,在[\d]改为[\d.]即可

onfocus是将上面分隔用的逗号,删除掉,只显示数字内容


效果:

①只能输入0-9数字;

②假如输入12345,会自动变为12,345

③假如输入框显示的是12,345,输入的时候,又变为12345,改为1234567后,输入框取消焦点后,又变为1,234,567

目录
相关文章
|
4月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
181 0
|
11月前
|
算法 前端开发
前端算法-罗马数字转整数
前端算法-罗马数字转整数
|
移动开发 前端开发 Android开发
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
2039 0
|
4月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
195 0
|
前端开发 UED CDN
前端代码分割和按需加载策略
前端应用的规模不断增长,为了提高网页加载速度和减少初始加载时间,前端代码分割和按需加载策略变得越来越重要。本文将深入探讨前端代码分割和按需加载的策略,以及如何使用现代前端工具来实现这些优化。
166 0
|
前端开发 JavaScript UED
前端路由分割
今天我们将探讨一项重要的前端技术 - 路由分割(Route Based Splitting)。作为一名资深的 web 前端技术博主,我将向您介绍这个技术的优点和缺点,适用场景,以及在知名项目中的使用。通过本文,初学者将能够快速掌握路由分割的概念和实践。废话不多说,让我们开始吧!
152 0
|
存储 算法 前端开发
前端算法-回文串分割
前端算法-回文串分割
|
前端开发
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
68 0
|
前端开发
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
58 0
|
前端开发
前端 解决input框被禁用后无法添加点击事件的bug 简单易懂,快来围观
在开发中,我们经常会遇到需要禁用input框的情况,但是禁用后无法添加点击事件的问题。这个问题可能会让你感到十分困扰,但是不用担心,本文将会为您介绍一种解决这个问题的方法