向上键时，在内容可编辑DIV中为数字添加逗号

Question

对不起，我的英语不好。

当keyUp函数时，我想为数字添加逗号。内容可编辑DIV.

我的代码目前正在反向工作。

function addCommas(x) {
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");
return parts.join(".");
}
$('div').keyup(function (){
var currentInput = $(this).text();
var fixedInput = currentInput.replace(/[A-Za-z!@#$%^&*()]/g, '');
$(this).text(fixedInput);
var test = /D/;
if (test.test($(this).text())) {
$(this).text($(this).text().replace(/D/g, ""));
}
$(this).text(addCommas($(this).text()));
})

div{
background-color:#ccc;
padding:5px;
border:1px dashed #000;
width:20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">
0
</div>

Answer 1

这里的主要问题是，当您在Keyup上使用$(this).text()替换元素的值时，当您一个接一个按键时，事件光标经常重置其位置。它最终将它设置为您案例中的起始位置。

为了解决这个问题，我们需要在keyup事件下，当它被触发或按键被按下时，首先保存输入中的文本位置。然后我们需要在keyup事件下的代码完成处理后再次设置它。

第三件事是使用CCD_ 2而不是CCD_。它设置更新后的值，而不是替换文本。

修复了下面运行代码段的代码

function addCommas(x) {
alert(x);
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");
return parts.join(".");
}
$('div').keyup(function() {
var position = this.selectionStart;
var currentInput = $(this).text();
var fixedInput = currentInput.replace(/[A-Za-z!@#$%^&*()]/g, '');
this.value = fixedInput;
//$(this).text(fixedInput);
var test = /D/;
if (test.test($(this).text())) {
//$(this).text($(this).text().replace(/D/g, ""));
this.value = this.value.replace(/D/g, "");
}
//$(this).text(addCommas($(this).text()));
this.value = this.value;
this.selectionEnd = position;
})

div{
background-color:#ccc;
padding:5px;
border:1px dashed #000;
width:20%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">
0
</div>