前端的小玩意(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

目录
相关文章
|
7月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
235 0
|
算法 前端开发
前端算法-罗马数字转整数
前端算法-罗马数字转整数
|
移动开发 前端开发 Android开发
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
2189 0
|
2月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
2月前
|
前端开发 JavaScript 开发者
利用代码分割优化前端性能:高级技巧与实践
【10月更文挑战第2天】在现代Web开发中,代码分割是优化前端性能的关键技术,可显著减少页面加载时间。本文详细探讨了代码分割的基本原理及其实现方法,包括自动与手动分割、预加载与预取、动态导入及按需加载CSS等高级技巧,旨在帮助开发者提升Web应用性能,改善用户体验。
|
7月前
|
前端开发
前端input上传文件获取视频或音频的时长
前端input上传文件获取视频或音频的时长
231 0
|
前端开发 UED CDN
前端代码分割和按需加载策略
前端应用的规模不断增长,为了提高网页加载速度和减少初始加载时间,前端代码分割和按需加载策略变得越来越重要。本文将深入探讨前端代码分割和按需加载的策略,以及如何使用现代前端工具来实现这些优化。
195 0
|
前端开发 JavaScript UED
前端路由分割
今天我们将探讨一项重要的前端技术 - 路由分割(Route Based Splitting)。作为一名资深的 web 前端技术博主,我将向您介绍这个技术的优点和缺点,适用场景,以及在知名项目中的使用。通过本文,初学者将能够快速掌握路由分割的概念和实践。废话不多说,让我们开始吧!
181 0
|
存储 算法 前端开发
前端算法-回文串分割
前端算法-回文串分割
|
前端开发
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
前端学习笔记202304学习笔记第十六天-vue3.0-实现input和button
76 0