web前端实现一个输入框,输入的整数部分自动添加千分位符号,并支持两位小数,如果有小数或者在中间输入,在哪个位置输入,转换后光标仍然在该位置
时间: 2024-05-10 15:20:24 浏览: 146
将光标定位于输入框最右侧实现代码
以下是一个实现该功能的示例代码:
HTML部分:
```html
<input type="text" id="number-input">
```
JS部分:
```javascript
function formatNumber(num) {
var parts = num.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if (parts.length === 2) {
parts[1] = parts[1].substring(0, 2);
}
return parts.join('.');
}
var input = document.getElementById('number-input');
var oldValue = '';
input.addEventListener('input', function(event) {
var newValue = event.target.value.replace(/[^\d.]/g, ''); // 只保留数字和小数点
if (newValue !== event.target.value) {
event.target.value = newValue;
}
if (newValue === '') {
oldValue = '';
return;
}
var cursorPosition = event.target.selectionStart; // 获取光标位置
var decimalPosition = newValue.indexOf('.');
if (decimalPosition === -1) {
// 没有小数部分
newValue = formatNumber(newValue);
} else {
// 有小数部分
var integerPart = newValue.substring(0, decimalPosition);
var decimalPart = newValue.substring(decimalPosition + 1);
integerPart = formatNumber(integerPart);
newValue = integerPart + '.' + decimalPart;
}
event.target.value = newValue;
// 重置光标位置
if (newValue.length > oldValue.length) {
cursorPosition += Math.floor((newValue.length - oldValue.length) / 3);
} else if (newValue.length < oldValue.length) {
cursorPosition -= Math.floor((oldValue.length - newValue.length) / 3);
}
oldValue = newValue;
event.target.setSelectionRange(cursorPosition, cursorPosition);
});
```
该代码使用了`input`事件监听输入框的输入变化,然后根据输入的内容进行格式化,并将格式化后的内容重新填入输入框中。在格式化过程中,会根据是否有小数部分分别处理整数部分和小数部分,并添加千分位符号。在处理完格式化后,会根据输入前后的字符数的差值,调整光标位置。
阅读全文