<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="input" value="" />
<script type="text/javascript">
let input = document.getElementById("input");
input.onfocus=function(){
console.log("onfocus")
input.setAttribute("type","number")
}
input.onblur=function(){
console.log("onblur")
input.setAttribute("type","text")
input.value=formatSeparator(input.value)
}
function formatSeparator (v) {
let step = 3;
let str = v.toString().replace(/,/g, '');
//处理小数
let index = str.indexOf(".");
if (index > -1) {
let integerStr = str.slice(0, index);
let decimalStr = str.slice(index, str.length);
return this.formatSeparator(integerStr) + decimalStr;
}
if (str.length < step + 1) return v.toString();
let arr = str.split("").reverse();
let resArr= [];
for (let i = 0; i < arr.length; i += step) {
let a = arr.slice(i, i + step);
(a.length === step && i !== arr.length - step && a.indexOf('.') === -1 && arr[i + step] !== "-") && a.push(",");
resArr = resArr.concat(a);
}
return resArr.reverse().join(" ").replace(/\s+/g, '')
}
</script>
</body>
</html>
该博客介绍了如何使用JavaScript监听输入框的焦点与失焦事件，当输入框获得焦点时，将其类型更改为数字，失去焦点时则恢复为文本并调用formatSeparator函数对数值进行格式化，添加千位分隔符。formatSeparator函数实现了对整数和小数部分的处理，确保数值的易读性。
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
