Javascript accounting.js将光标保持在小数点后
我正在使用插件格式化货币。唯一的问题是,它会在键入任何内容时立即将光标放在值的末尾,因为我为Javascript accounting.js将光标保持在小数点后,javascript,jquery,currency-formatting,accounting.js,Javascript,Jquery,Currency Formatting,Accounting.js,我正在使用插件格式化货币。唯一的问题是,它会在键入任何内容时立即将光标放在值的末尾,因为我为货币保留了2个十进制值的精度,所以我无法再键入更多内容。我没有找到任何用于在您键入时立即编辑值的源。我怎样才能做到这一点?找到任何解决方法或黑客 <input autocomplete="off" type="text" id="Price"/> 完全重新编辑 (为了清楚起见) 我认为,这是对的一种bug修复。 问题是在输入字段中的keyup(或类似此处的input事件)上使用光标位置。
货币
保留了2个十进制值的精度,所以我无法再键入更多内容。我没有找到任何用于在您键入时立即编辑值的源。我怎样才能做到这一点?找到任何解决方法或黑客
<input autocomplete="off" type="text" id="Price"/>
完全重新编辑
(为了清楚起见)
我认为,这是对的一种bug修复。
问题是在输入字段中的
keyup
(或类似此处的input
事件)上使用光标位置。在这个解决方案中,我切换回
keyup
事件,因为奇怪的是input
事件没有提供keycode
编号。这是最终的解决方案
加上我的这个小脚本(一年前左右,部分由SO答案和一些作品制作而成……记不起来源了)
然后,对于
accounting.js
,管理onkeyup值更新的方法是:$("#Price")
.on('keyup', function (event) {
var val = this.value;
var x = event.keyCode; // Get the keycode for backspace check
var offset=0; // Set the offset to zero by default.
if(((x>=96)&&(x<=105))||((x>=37)&&(x<=40))||(x==8)||(x==46)){ // Allow digits from 0 to 9 AND arrows AND backspace AND Delete
var dotPos = val.indexOf("."); // Check for dot position.
var offsetComa = val.length%4; // Variable used to check if a coma is to be added.
// Offset conditions
if(val.length==1){
offset=1; // When the first digit is entered in the field, it's time to offset by 1 for the "£" to be added.
}
if(val.length>1){
if(offsetComa==0){ // when there is no remainder of val.length/4, it's time to offset 1 for the coma to be added.
offset=1;
}
if((offsetComa==0)&&((x==46)||(x==8))){ // when there is no remainder of val.length/4, BUT WE REMOVED A CHARACTER. offset -1 for the coma to be added.
offset=-1;
}
if(dotPos==1){ // If dot is right after "£" => user has backspaced!
val=""; // Consider val as empty!
}
if(dotPos==-1){ // If no dot present reinsert it!
val = val.slice(0, cursorPos-1) + "." + val.slice(cursorPos);
}
if(cursorPos==val.length-2){ // If inputting the second decimal, remove the possible third to avoid rounding.
val = val.slice(0, cursorPos+1);
}
if(cursorPos==val.length-3){ // If inputting decimals, clear offset.
offset=0;
val = val.slice(0, val.length-1)
}
}
}else{ // Removes any non-digit character
if(x!=8){
cursorPos = GetCursorPos(this);
val = val.slice(0, cursorPos-1) + val.slice(cursorPos);
if(val.charAt(cursorPos-1)=="."){ // decimal point
cursorPos+=1;
}
this.value = val;
SetCursorPos(this,cursorPos-1);
}
}
var hasCurrencySymbol = val.startsWith('£');
var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
if(formatted=="£0.00"){
formatted="" // Empty the field instead of showing the problematic "£0.00"
}
cursorPos = GetCursorPos(this); // Get previous cursor position
this.value = formatted; // Return the value to field
SetCursorPos(this,cursorPos+offset); // Correct cursor position
});
$(“价格”)
.on('keyup',功能(事件){
var val=该值;
var x=event.keyCode;//获取用于退格检查的keyCode
var offset=0;//默认设置偏移量为零。
如果((x>=96)&&(x=37)&&(x)用户已退格!
Val=“”;(或)认为VALL是空的!
}
如果(dotPos==-1){//如果没有点,请重新插入它!
val=val.slice(0,cursorPos-1)+“+”val.slice(cursorPos);
}
如果(cursorPos==val.length-2){//如果输入第二个小数点,则删除可能的第三个小数点以避免四舍五入。
val=val.slice(0,cursorPos+1);
}
如果(cursorPos==val.length-3){//如果输入小数,则清除偏移量。
偏移量=0;
val=val.slice(0,val.length-1)
}
}
}else{//删除任何非数字字符
如果(x!=8){
cursorPos=GetCursorPos(this);
val=val.slice(0,cursorPos-1)+val.slice(cursorPos);
如果(val.charAt(cursorPos-1)=“){//小数点
cursorPos+=1;
}
this.value=val;
SetCursorPos(本,cursorPos-1);
}
}
var hasCurrencySymbol=val.startsWith(“£”);
var formatted=accounting.formatMoney(val.substr(hasCurrencySymbol?1:0),选项);
如果(格式==”0.00英镑“){
formatted=”“//清空字段,而不是显示有问题的“£0.00”
}
cursorPos=GetCursorPos(this);//获取上一个光标位置
this.value=formatted;//将值返回到字段
SetCursorPos(这个,cursorPos+偏移量);//正确的光标位置
});
它管理计算出的光标偏移量onkeyup。
它还管理退格/删除«反向偏移»。
可以输入小数。
另外,它会立即删除所有非数字字符。
:D
查看以编程方式更改输入值时,还需要恢复光标位置,因为浏览器会丢失该信息 最简单的方法是恢复更改前使用的位置
// pseudocode
.on('input', function () {
var cursorPosition = this.selectionEnd;
var val = this.value;
var hasCurrencySymbol = val.startsWith('£');
var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
this.value = formatted;
this.setSelectionRange(cursorPosition, cursorPosition);
});
但可能更理想的方法是将光标放在刚刚插入的数字之后。下面的代码通过新旧输入文本之间的长度差移动最后记住的光标位置,这不是理想的解决方案(尤其是对于第一个插入的数字),但却是进一步改进的良好起点
.on('input', function () {
var cursorPosition = this.selectionEnd;
var val = this.value;
var hasCurrencySymbol = val.startsWith('£');
var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
var lengthDiff = formatted.length - val.length;
this.value = formatted;
this.setSelectionRange(cursorPosition + diff, cursorPosition + diff);
});
代码使用所有流行浏览器(包括IE9+)都支持的
setSelectionRange
.我肯定会选择这个blur
或change
,但我选择了input
事件,因为我想在键入时更改它,而且input
事件响应keyup
,keydown
,粘贴
事件等,我强烈不同意您的语句输入不是事件。你可以检查一下,你让我学到了一些新东西!我只考虑了列出的事件。我同意,开箱即用,有几个事件,很多人都不知道……)但是,问题在于光标的位置……如果我理解得很好的话。我可能会有一个小的代码块,可能会感兴趣。等等。我还有一个很好的更新要告诉你……因为我不满意给你留下“其他用户行为案例”,请看;)我会编辑我的答案,使之与其他读者的正确修复方法保持一致。;)谢谢你的回答。。但是你的第二种方法对我不太管用。然而,第一种方法效果很好,但唯一的问题是光标没有放在正确的位置。可能货币符号是个问题。当您输入时,您可以看到它会将一个位置向后移动。。
// pseudocode
.on('input', function () {
var cursorPosition = this.selectionEnd;
var val = this.value;
var hasCurrencySymbol = val.startsWith('£');
var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
this.value = formatted;
this.setSelectionRange(cursorPosition, cursorPosition);
});
.on('input', function () {
var cursorPosition = this.selectionEnd;
var val = this.value;
var hasCurrencySymbol = val.startsWith('£');
var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
var lengthDiff = formatted.length - val.length;
this.value = formatted;
this.setSelectionRange(cursorPosition + diff, cursorPosition + diff);
});