在HTML/JavaScript中使用所选数字进行同步输入更新

我正在尝试实现一个自定义输入，可以使用左箭头键或右箭头键选择数字，并使用上/下箭头键增加/减少数字。以下是JSFIDLE中的代码：。然而，我有两个问题：

我无法使用数字键盘添加数字，输入始终保持在X.XX

当我使用我编写的另一个函数parseLocalFloat时，它被注释掉了，输出停止显示任何内容，我不能使用左键和右键选择数字等

我如何克服这两个问题？请给我点灯，谢谢

HTML JavaScript 对于1：

确保如果gotCode为false，则不会发生默认事件（在本例中为默认键控事件）

只有当keyCode等于箭头键的37、38、39或40时，gotCode才似乎为真。您实际上是在防止其他键（如数字键）对文本框产生任何影响

您可能希望在shift或caps未打开时启用数字键和数字键盘键

此外，您可能需要检查cur是否为数字。在尝试增加或减少其值之前

你可以做：

var isNumberKey = (
        (  e.keyCode >= 48     //is more than or equal to 0 key
        && e.keyCode <= 57     //is less than or equal to 9 key
        && !e.shiftKey)        //shift key or cap key not on
    || (   e.keyCode >= 96     //more than or equal to 0 key in number pad
        && e.keyCode <= 105)); //less than or equal to 9 key in number pad
if(!gotCode && !isNumberKey) { //not arrow key or number key
    console.log(e);
    e.preventDefault();
    return false;
}

将inputBox设置为parseLocalFloat返回的恰好是数字的值

这是有问题的，因为您随后尝试将keyUp事件附加到该数字而不是inputBox：

您可能希望对号码调用parseLocalFloat，并将out文本框的值设置为：

var inputBox = document.getElementById('in');
inputBox.onkeyup = function(){
    document.getElementById('out').innerHTML = parseLocalFloat(inputBox.value);
}

函数createSelectionfield，开始，结束{ if field.createTextRange{ var selRange=field.createTextRange； selRange.collapsetrue； selRange.moveStart'character'，start； selRange.moveEnd'character'，end； selRange.select； }else if field.setSelectionRange{ field.setSelectionRangestart，end； }else if field.selectionStart{ field.selectionStart=开始； field.selectionEnd=结束； } } 函数getLocalDecimalSeparator{ var n=1.1； 返回n.toLocaleString.子字符串1,2； } 函数parseLocalFloatnum{ return+num.replacegetLocalDecimalSeparator'； } var inputBox=document.getElementById'in'； //var inputBox=parseLocalFloatdocument.getElementByID'in'。值； inputBox.onkeyup=函数{ document.getElementById'out'。innerHTML=parseLocalFloatinputBox.value； } $'in'.onkeydown，函数E{ var gotCode=false； var curPos=this.selectionStart； var endPos=this.selectionEnd； ifcurPos！==endPos{ createSelectionthis、curPos、curPos+1； } //获得职位 ife.keyCode==37{ curPos-； gotCode=true； } ife.keyCode==39{ curPos++； gotCode=true； } var$thisVal=$this.val； 变量before=$thisVal.substring0，curPos； var after=$thisVal.substringcurPos+1； var cur=数字$thisVal.substringcurPos，curPos+1； //避免添加额外的内容 ifcurPos<$thisVal.length&！isNaNcur{ ife.keyCode==38{ cur++； 如果cur>9 cur=0； $this.valbefore++cur++after； gotCode=true； } ife.keyCode==40{ cur-； ifcur<0 cur=9； $this.valbefore++cur++after； gotCode=true； } }

---

var isNumberKey=e.keyCode>=48&&e.keyCode=96&&e.keyCode对于要工作的get number键：

如上所述，您需要添加要支持的密钥：

if(e.keyCode >= 48 && e.keyCode <= 57)  {
        var num = e.keyCode - 48; // 0=48; 9=59
        $(this).val(before + '' + num + '' + after);
        gotCode = true;
        e.preventDefault(); // otherwise a new number is added as well
    }

这需要在if！gotCode之前完成

---

关于customFloat:Moishe的回复你好，你能进一步解释我如何解决第二个问题吗？谢谢。我在答案中添加了更多的解释和一些工作代码。如果答案需要更多解释，请告诉我。谢谢你帮助Moishe！你好Niko，我尝试做一些更改，但customFloat仍然没有“不起作用。你能帮我一下吗？我更新了JSFIDLE，使它现在可以工作了-你应该避免将jquery与普通javascript dom混合使用-这看起来很难看。然后，第二个问题是，你从未执行过浮点代码，它必须在事件函数中执行，因为我们阻止了控件中的默认处理-你必须手动触发e change event.嗨，Niko，我更新了JSFIDLE。我想做的是，当数字达到9并递增时，它会自动递增上一个数字。我尝试通过函数“smallestDecimalUnit”来实现这一点，但有时它可以工作，但有时不可以。此外，我还为“.”添加了输入，但不知怎么地，当我键入“.”时，它会显示为“..”你能得到什么看一看，给我一些想法？

var isNumberKey = (
        (  e.keyCode >= 48     //is more than or equal to 0 key
        && e.keyCode <= 57     //is less than or equal to 9 key
        && !e.shiftKey)        //shift key or cap key not on
    || (   e.keyCode >= 96     //more than or equal to 0 key in number pad
        && e.keyCode <= 105)); //less than or equal to 9 key in number pad
if(!gotCode && !isNumberKey) { //not arrow key or number key
    console.log(e);
    e.preventDefault();
    return false;
}

var inputBox = parseLocalFloat(document.getElementByID('in').value);

inputBox.onkeyup = function(){
    document.getElementById('out').innerHTML = inputBox.value;
}

var inputBox = document.getElementById('in');
inputBox.onkeyup = function(){
    document.getElementById('out').innerHTML = parseLocalFloat(inputBox.value);
}

if(e.keyCode >= 48 && e.keyCode <= 57)  {
        var num = e.keyCode - 48; // 0=48; 9=59
        $(this).val(before + '' + num + '' + after);
        gotCode = true;
        e.preventDefault(); // otherwise a new number is added as well
    }