我正在使用 accoungting.js 插件将其用于格式货币。唯一的问题是，它在键入任何内容后立即将光标放在值的末尾，并且由于我保留了currency的2个小数值精度，因此它阻止了我输入更多。我找不到任何来源在您输入后立即编辑值的来源。我该如何完成这项工作？找到了任何解决方法或hack？
<input autocomplete="off" type="text" id="Price"/>
JS
var options = {
symbol : "£",
decimal : ".",
thousand: ",",
precision : 2,
format: "%s%v"
};
$("#Price")
.on("input",
function() {
var _this = $(this);
debugger;
var val = _this.val().startsWith("£") ? _this.val().split("£")[1] : _this.val();
var value=accounting.formatMoney(val,options);
_this.val(value);
});
Demo
完全重新编辑
（为了清楚地）
我认为这是accounting.js的一种错误修复。
问题是关于在keyup上使用的光标位置（或在input事件中使用）在输入字段中。
在此解决方案中，我切换回keyup事件，因为 - 奇怪 - input事件不提供keycode号码。
这是最终解决方案
添加我的小脚本（部分是由SO答案和一些工作制成的，一年前左右...不记得来源）
// --------------------------------------------------------------------------- What is the browser ?
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
function GetCursorPos (field) {
// Initialize
iCaretPos = 0;
if (isIE){ //(document.selection) {
// Set focus on the element
field.focus();
// To get cursor position, get empty selection range
oSel = field.createTextRange();
// Move selection start to 0 position
oSel.moveStart('character', -field.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
if (isChrome||isSafari){ //(field.selectionStart || field.selectionStart == '0')
iCaretPos = field.selectionStart;
}
if (isFirefox){
iCaretPos = field.selectionStart;
}
return iCaretPos;
}
function SetCursorPos (field,Pos) {
// Set focus on the element
field.focus();
if (isIE){
field.selectionStart=Pos;
}
if (isChrome||isSafari){
field.setSelectionRange(Pos,Pos);
}
if (isFirefox){
field.selectionStart=Pos;
}
return;
}
然后，正是对于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
});
它管理一个计算出的光标偏移ONKEYUP。
它还管理Backpace/DELETE«反向偏移»。
小数可以输入。
奖励，它立即消除所有非数字字符。
：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。