天天看点

原生input实现千分位分隔符

<!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>

           

继续阅读