按下退格键或删除键时如何做某事

Question

所以当我按下退格键或删除键时，我无法让我的代码执行某些操作。

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

它调用compute()，它通过updateAllFields()[=38]多次调用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 would 出现时，所有文本输入都重置为相同的大小和 appea运行ce 当他们的占位符显示时。

我查过这个，发现以下内容：

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');
      }

那是行不通的。 我究竟做错了什么？如果一个字段的整个文本字段都被清除了，我怎样才能让我的字段恢复到原来的状态？

Answer 1

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

如果输入是整数，只需在 compute 中添加一个检查：

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

其中 isNumeric 是一个确定字符串是否表示数字的函数。有many ways to do this，比如这个：

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

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

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);
}