Javascript 按backspace或delete时如何执行操作

因此，当我点击backspace或delete时，我很难让代码执行某些操作

我的代码工作得很好。它运行以下代码，更新多个文本输入字段的大小和值

它调用compute（），它通过updatealfields（）多次调用update（）

  function compute(input,number){
    var decider = String(input.value);
    updateAllFields(decider,number);
  }
  function update(label,convert,decider,number){
    var updater = document.getElementById(label);
    updater.value = parseInt(decider, number).toString(convert);
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px';
  }
  function updateAllFields(decider,number){
    update('binary',2,decider,number);
    update('octal',8,decider,number);
    update('decimal',10,decider,number);
    update('hexadecimal',16,decider,number);
  }

现在，一切正常。我遇到了一个问题，当删除整个字段时，我会得到NaN，并且无法再编辑文本字段，除非我比NaN值聪明

发生的情况是，如果用户点击“Ctrl+home”，则会出现退格（擦除整个字段），NaN。 相反，我想要的是，当出现NaN时，所有文本输入都会重置为其占位符显示时的大小和外观

我查了一下，发现如下：

var input = document.getElementById('display');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key !== 8 && key !== 46 )
        return true;
};

它不起作用。我甚至尝试替换return false，以读取替换代码：

  function refresh(label,number){
    var refresher = document.getElementById(label);
    refresher.value = '';
    refresher.size = number;
  }
  function refreshAllFields(){
        refresh('binary','3');
        refresh('octal','2');
        refresh('decimal','4');
        refresh('hexadecimal','8');
      }

这是行不通的。

---

我做错了什么？如果其中一个字段的整个文本字段都被删除了，如何让字段重新设置为其原始状态？

您无需降低出错的可能性。您需要完全防止错误。只需验证输入数据，就不会得到

NaN

如果输入是整数，只需在

计算中添加一个检查：

function compute(input,number){
    var decider = String(input.value);
    if (isNumeric(decider)) 
    {
        // do something else
        decider = "0"; // for example
    }
    updateAllFields(decider, number);
}

其中，
isNumeric
是一个函数，用于确定字符串是否表示数字。例如，有：

function isNumeric(value)
{
    if (isNaN(value)) {
         return false;
    }
    var x = parseFloat(value);
    return (x | 0) === x;
}

此外，您可以停止将
判定符
和
数字
作为字符串传递给每个函数：

function compute(input, number){
    if (isNumeric(input.value))
    {
        updateAllFields(parseInt(input.value, number)); // val is a Number now
    } else {
        updateAllFields(0); // for example
    }       
}
function update(label,convert,val){
    var updater = document.getElementById(label);
    updater.value = val.toString(convert);
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px';
}
function updateAllFields(val) {
    update('binary',2,val);
    update('octal',8,val);
    update('decimal',10,val);
    update('hexadecimal',16,val);
}    

在我这方面，你关于“val”的建议似乎完全阻止了函数的运行。另外：虽然这个“isNumeric（value）”函数似乎解决了我的NaN问题，但它也引入了一个新的问题，即限制文本的长度，以及在文本框清除时不调整文本框的大小。@MarkPuchalaII做的与答案所说的完全相同的事情应该没有帮助。这只是一个例子，它展示了你可以如何处理你的问题。那么，您在控制台中有任何错误吗？可能想再次检查我的评论；我实际上是在改变它（我意识到它是措辞拙劣的，正如你指出的），因为你在回应。另外：没有错误。@MarkPuchalaII它将限制文本的长度，因为JavaScript和任何其他编程语言对数值类型的值都有限制。在我更改之前，您可以在程序中输入一个很长的数字，但它不起作用。看见调整大小怎么样？我还没有实现它。这实际上是另一个问题。你可以自己做，也可以在互联网上找到解决方案。有没有办法不限制我的文本长度？“isNumeric（）”中的“ParseInt（）”函数似乎是导致限制的原因。我正试着自己去弄清楚，但到目前为止我还不能。。